Click source in JavaScript and jQuery, human or automated?

Question

We all know that you can simulate click or any other event on an element using one of these ways:

$('#targetElement').trigger('eventName');
$('#targetElement').click();

I have encountered a situation in which, I should know how an element is clicked. I should know if it's been clicked automatically via code, or by pressing mouse button. Is there anyway I can do it without hacks or workarounds? I mean, is there anything built into browsers' event object, JavaScript, or jQuery that can tell us whether click has been initiated by a human action or by code?

Answer 1

Try this:

$('#targetElement').click(function(event, generated) {
    if (generated) {
        // Event was generated by code, not a user click.
    } else {
        // Event was generated by a user click.
    }
});

Then, to make this work, you have to trigger them like this:

$('#targetElement').trigger('click', [true]);

See this jsfiddle.

Answer 2

Check out event.which, it'll be undefined if triggered with code.

$(document).click(function(event) {
    if (event.which) {
       // Triggered by the event.
    } else {
       // Triggered with code.
    }
});

jsFiddle.

Answer 3

Here's one way I have found (tested in Chrome)

$('#foo').click(function(e) {
    if (e.originalEvent)
        alert('Has e (manual click)');
    else
        alert('No e (triggered)');
});

See here for testing: http://jsfiddle.net/ZPD8w/2/

Answer 4

In your immediate event handler, provide an e parameter. If the click is automated (via code), this e would be undefined (no need to check e.target as @alex has said):

$('#targetElement').click(function(e){
   if(e)
   {
      // Click is triggered by a human action
   }
   else
   {
     // Click is triggered via code
   }
});