在 jQuery 中,如何区分编程式单击和用户单击?

假设我定义了一个 click 处理程序:

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


});

在函数处理程序中,如何判断事件是以编程方式触发的,还是由用户触发的?

22216 次浏览

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']);

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 clientX0, 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/

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.

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!

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

Vanila js solution:

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

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>