In jQuery, how can I tell between a programmatic and user click?

Question

Say I have a click handler defined:

$("#foo").click(function(e){

});

How can I, within the function handler, tell whether the event was fired programmatically, or by the user?

Answer 1

You could have a look at the event object e. If the event was triggered by a real click, you'll have things like clientX, clientY, pageX, pageY, etc. inside e and they will be numbers; these numbers are related to the mouse position when the click is triggered but they will probably be present even if the click was initiated through the keyboard. If the event was triggered by $x.click() then you won't have the usual position values in e. You could also look at the originalEvent property, that shouldn't be there if the event came from $x.click().

Maybe something like this:

$("#foo").click(function(e){
    if(e.hasOwnProperty('originalEvent'))
        // Probably a real click.
    else
        // Probably a fake click.
});

And here's a little sandbox to play with: http://jsfiddle.net/UtzND/

Answer 2

You can use an extra parameter as stated in the jQuery trigger manual:

$("#foo").click(function(e, from){
    if (from == null)
        from = 'User';
    // rest of your code
});

$('#foo').trigger('click', ['Trigger']);

Answer 3

There is another question answered already.

How to detect if a click() is a mouse click or triggered by some code?

Use the which property of the event object. It should be undefined for code-triggered events

$("#someElem").click(function(e) {
    if (e.which) {
        // Actually clicked
    } else {
        // Triggered by code
    }
});

JsFiddle example - http://jsfiddle.net/interdream/frw8j/

Hope it helps!

Answer 4

I have tried all above solutions.Nothing has been worked in my case. Below solution worked for me. Hope it will help you as well.

$(document).ready(function(){
  //calling click event programmatically
    $("#chk1").trigger("click");
});

$(document).on('click','input[type=checkbox]',function(e) {
  if(e.originalEvent.isTrusted==true){
   alert("human click");
  }
  else{
   alert("programmatically click");
  }
    
    });

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js">
</script>

<input type="checkbox" id="chk1" name="chk1" >Chk1</input>
<input type="checkbox" id="chk2" name="chk2" >Chk2</input>
<input type="checkbox" id="chk3" name="chk3" >Chk3</input>

Answer 5

DOM Level 3 specifies event.isTrusted. This is only currently supported in IE9+ and Firefox (based on my tests. I've also read (although not thoroughly researched) that it can be overridden in some browsers and is probably not yet 100% ready to actually be trusted (unfortunately).

This is a modified version of @mu's fiddle that works on IE and Firefox.

Answer 6

Vanila js solution:

document.querySelector('button').addEventListener('click', function (e){
    if(e.isTrusted){
        // real click.
    }else{
        // programmatic click
    }
});

Answer 7

Not going to participate in the intellectual discussion, the code which worked for me to filter .click() and .trigger('click') is-

$(document).on('click touchstart', '#my_target', function(e) {
    if (e.pageX && e.pageY) { // To check if it is not triggered by .click() or .trigger('click')
        //Then code goes here
    }
});