为什么中间点击在几种情况下不会触发"点击"？

Question

这是我所看到的行为的JSFiddle,涉及中间点击和clickChrome和FF中的事件.

'click'有点实际

方法1:将click处理程序直接绑定到a元素,中键单击将触发Chrome中的处理程序,但不会触发FF.

$('div a').on('click', function(ev) {
    // middle click triggers this handler
});

方法2:将委托的click处理程序绑定到div包含一个或多个的处理程序a.中键单击不会在Chrome或FF中触发此处理程序.

$('div').on('click', 'a', function(ev) {
    // middle click doesn't trigger this handler
});

如果div开始为空并且a稍后通过AJAX调用填充元素,或者作为某些用户输入的结果,则此方法非常有价值.

'mouseup'有效

使用mouseup而不是click导致方法1和2都在两个浏览器中都有效.

// Approach 1 w/ mouseup
$('div a').on('mouseup', function(ev) {
    // middle click **does** trigger this handler in Chrome and FF
});

// Approach 2 w/ mouseup
$('div').on('mouseup', 'a', function(ev) {
    // middle click **does** trigger this handler in Chrome and FF
});

这里的的jsfiddle用mouseup.

这很有趣,在某些情况下可能有用,因为mouseup差不多click.但mouseup 事实并非如此 click,而且我的行为也是如此click.我不想创建一个hacky mousedown; setTimeout; mouseup模拟click.

我很确定答案是"nope",但有一种跨浏览器的方式导致中键点击触发click处理程序吗？如果没有,原因是什么？

Answer 1

通常会针对鼠标左键触发click事件,但是,根据浏览器的不同,右键和/或中键可能会也可能不会发生单击事件.

在Internet Explorer和Firefox中,不会为右侧或中间按钮触发单击事件.

因此,我们无法在中间或右侧按钮上可靠地使用事件处理程序的click事件.

相反,要区分鼠标按钮,我们必须使用mousedown和mouseup事件,因为大多数浏览器都会为任何鼠标按钮触发mousedown和mouseup事件.

在Firefox和Chrome中event.which应该包含一个数字,表示按下了什么鼠标按钮(1为左,2为中,3为右).

另一方面,在Internet Explorer中,event.button指示单击了哪个鼠标按钮(1为左,4为中,2为右);

event.button 也应该在Firefox和其他浏览器中工作,但数字可能略有不同(0为左,1为中,2为右).

所以把它放在一起我们通常做这样的事情:

document.onmousedown = function(e) {
    var evt = e==null ? event : e;

    if (evt.which) { // if e.which, use 2 for middle button
        if (evt.which === 2) {
            // middle button clicked
        }
    } else if (evt.button) { // and if e.button, use 4
        if (evt.button === 4) {
            // middle button clicked
        }
    }
}

当jQuery规范化时event.which,你应该只需要在jQuery事件处理程序中使用它,因此这样做:

$('div a').on('mousedown', function(e) {
    if (e.which === 2) {
        // middle button clicked           
    }
});

换句话说,你不能使用onclick事件,所以要模拟它,你可以同时使用mousedown和mouseup.

您可以添加一个计时器来限制mousedown和mouseup事件之间允许的时间,甚至可以使用mousemove处理程序来限制mousedown和mouseup事件之间的移动,并且如果鼠标指针移动超过十个,则不会触发事件处理程序像素等可能性几乎是无穷无尽的,所以这不应该是一个问题.

$('#test').on({
    mousedown: function(e) {
        if (e.which === 2) {
            $(this).data('down', true);
        }
    },
    mouseup: function(e) {
        if (e.which === 2 && $(this).data('down')) {
            alert('middle button clicked');
            $(this).data('down', false);
        }
    }
});