95

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?

9
  • How does the program go about firing an event programmatically?
    – Clayton
    Jul 13, 2011 at 6:05
  • 5
    Why do you need to distinguish the cases? Jul 13, 2011 at 6:09
  • 1
    @Clayton: $x.click() or $x.trigger('click'). Jul 13, 2011 at 6:19
  • I had a situation with an image-slider that automatically scrolled through the images, and did so by triggering clicks on the correct nav item associated with the image. The trouble is, when the user clicks on the nav, the automatic rotation should stop.
    – Kasapo
    Aug 8, 2012 at 15:15
  • 2
    This works in latest firefox, chrome and IE9. Why not accept the answer below with the highest votes?? @kevino
    – OZZIE
    Oct 10, 2013 at 10:00

7 Answers 7

123

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/

12
  • 4
    That's awesome ... I just thought to myself "maybe jQuery triggered events don't have mouse position information"! w00t!
    – Kasapo
    Aug 8, 2012 at 15:14
  • 2
    This can be defeated in browsers that support createEvent. jsfiddle.net/UtzND/26 Sep 15, 2012 at 16:43
  • 2
    @JoeEnzminger yes but why would you defeat your own script so to speak...?
    – OZZIE
    Oct 10, 2013 at 10:01
  • 3
    I'm concerned about a third party script generating a click event and my script handling it on the assumption that it was user generated (an actual click). Oct 11, 2013 at 13:35
  • 2
    @JoeEnzminger: All bets are off once your code is in the browser, there's nothing you can do that can't be defeated by a sufficiently clever person. I think the best you can do is check a bunch of things: Is there an originalEvent? Is it the right sort of thing? Are there coordinates anywhere? Are the coordinates consistent? Are the coordinates inside #foo? ... Oct 11, 2013 at 17:01
45

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']);
4
  • 3
    The only problem I see with this is that you can't distinguish between a normal click and $x.click(), the .click() caller has to explicitly tell you that they're faking it. This may or may not be an issue depending on what Kevin Owocki is up to. Jul 13, 2011 at 6:25
  • 1
    @mu : I don't quite understand your difference between a "normal" click (user?) and the $x.click() which is the eventHandler (for user click, which may be "normal")
    – Shikiryu
    Jul 13, 2011 at 7:54
  • 1
    The difference is that one comes from the user but the other from software. The fake click may be coming from a plugin or some other code that can't be modified to add the extra arguments. I'm not critizing your solution, just noting some possible holes. Jul 13, 2011 at 8:07
  • Although mu is correct and this will not work in every situation, it was exactly what I was looking for, thank you! Didn't know I could pass the extra parameter like a var, but that's exactly what I needed to test for "real" clicks in a complicated UI that treats some "real" clicks as programmatic. Thanks for both incredibly useful solutions!
    – Phil
    Dec 1, 2012 at 15:28
9

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!

1
  • 2
    Doesn't always work. E.g. select would give an e.which==undefined even for a genuine event.
    – JNF
    Jan 31, 2016 at 8:20
6

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>

4

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.

2
  • Good point. I don't think anything is going to be 100% solid though. You'd have to mix in some tests to see if isTrusted is supported and not writeable. I think the real answer depends on the why behind this question and we never found out why. Sep 15, 2012 at 16:55
  • @mu, I came to this question after asking a similar, but more general one. My "why" case is I want to make sure I am only performing an action (a financial transaction, albeit a small one) iff the user took direct affirmative action on the page. Sep 15, 2012 at 16:58
1

Vanila js solution:

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

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
    }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.