Question

假设我定义了一个点击处理程序：

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

});

如何在函数处理程序中告诉事件是以编程方式还是由用户触发？

Answer 1

您可以查看事件对象e。如果事件是通过真实点击触发的，那么clientX内部会显示clientY，pageX，pageY，e等内容。将是数字;这些数字与触发点击时的鼠标位置有关，但即使点击是通过键盘启动的，它们也可能存在。如果事件是由$x.click()触发的，那么您将无法在e中获得通常的位置值。您还可以查看originalEvent property，如果事件来自$x.click()，则不应该在那里。

也许是这样的：

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

这是一个可以玩的小沙箱：http://jsfiddle.net/UtzND/

Answer 2

您可以使用jQuery trigger manual中所述的额外参数：

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

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

Answer 3

已经回答了另一个问题。

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

使用事件对象的which属性。对于代码触发的事件，它应该是undefined

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

JsFiddle示例 - http://jsfiddle.net/interdream/frw8j/

希望它有所帮助！

Answer 4

DOM Level 3指定event.isTrusted。这只是目前在IE9 +和Firefox中支持（基于我的测试。我也读过（尽管没有经过深入研究）它可以在某些浏览器中被覆盖，并且可能还没有100％准备好实际被信任（不幸的是）。

This是@ mu的小提琴的修改版本，适用于IE和Firefox。

Answer 5

Vanila js解决方案：

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

Answer 6

不参与智力讨论，我可以过滤.click()和.trigger('click')的代码是 -

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

在jQuery中，我如何区分程序和用户点击？

6 个答案: