Jquery - Differentiate Between 'click' And 'focus' On Same Input When Using Both

May 30, 2024 Post a Comment

I'm trying to trigger an event on an input if the input is clicked or if the input comes in to focus. The issue i'm having is preventing the event from firing twice on the click as

Solution 1:

How about setting a flag on focus so we can fire on focus and ignore clicks but then listen for clicks on the focussed element too? Make sense? Take a look at the demo jsFiddle - If you focus or click on the unfocussed .index2 it triggers the focus event and ignores the click. Whilst in focus, clicking on it will trigger the click.

I have no idea why you would want this (I cant imagine anyone wanting to click on a focussed element for any reason (because the carat is already active in the field) but here you go:

$(function () {
    $('.input2').on("click focus blur", function(e) {
        e.stopPropagation();
        if(e.type=="click"){
            if($(this).data("justfocussed")){
                $(this).data("justfocussed",false);
            } else {
                //I have been clicked on whilst in focusconsole.log("click");
            }
        } elseif(e.type=="focus"){
            //I have been focussed on (either by clicking on whilst blurred or by tabbing to)console.log("focus");
            $(this).data("justfocussed",true);
        } else {
            //I no longer have focusconsole.log("blur");
            $(this).data("justfocussed",false);
        }
    });
});

http://jsfiddle.net/XALSn/12/

Solution 2:

This probably won't be the best answer, but this is a way of doing it. I would suggest adding tab indexes to your inputs and firing the focus event when you blur from another input.

I've added that to this fiddle: http://jsfiddle.net/XALSn/9/

$(function () {
    $('.input2').click(function(e) {
    alert("click");
    e.preventDefault();
});
});

$('input').blur(function(){
    $('input').focus(function() {
        alert("focus");
    });
});

Solution 3:

You can use one thing I am using very often in JS

var doSomething = true;

$(function () {
    $('.input2').click(function(e) {
        if (doSomething) {
        // do something :)
        }    
        doSomething = false;
    });
    $('.input2').focus(function() {
        if (doSomething) {
        // do something :)
        }
        doSomething = false;
    });
});

But You have to change value of doSomething on mouseout or foucs over etc. :)

Solution 4:

$(function () {
    var hasFocus = false;
    $("body")
    .off()
    .on({
        click : function()
        {
            if(!hasFocus)
            {
                hasFocus = true;
                alert("click");
            }
        },

        focus : function()
        {
            if(!hasFocus)
            {
                hasFocus = true;
                alert("focus");
            }
        }
    },".input2");
});

try setting a flag hasFocus and act accordingly

http://jsfiddle.net/AEVTQ/2/

Solution 5:

just add e.preventDefault() on the click event

$(function () {
    $('.input2').click(function(e) {
        console.log("click");
        e.preventDefault();
        e.stopPropagation();
    });
    $('.input2').focus(function() {
        console.log("focus");
    });
});

If I understand your question right, the e.prevnetDefault() will prevent the browser from automatically focusing on click. Then you can do something different with the click than would with the focus

Html5 Info