'点击'有点分类

Question

以下是我所看到的JSFiddle行为，与Chrome和FF中的中间点击和click事件有关。

'点击'有点分类

方法1 ：将click处理程序直接绑定到a元素，中间点击会触发Chrome中的处理程序，但不会触发FF。

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

方法2 ：将委派的click处理程序绑定到包含一个或多个div的{{1}}。中间点击将不在Chrome或FF中触发此处理程序。

如果div开始为空并且稍后通过AJAX调用填充$('div').on('click', 'a', function(ev) { // middle click doesn't trigger this handler });元素，或者作为某些用户输入的结果，则此方法非常有用。

'mouseup'正常工作

使用a代替mouseup会导致方法1和2在两种浏览器中都有效。

click

以下是JSFiddle // 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 });。

这很有趣，在某些情况下可能会有用，因为mouseup几乎是mouseup。但是click 不是 mouseup，我正在追踪click的行为。我不想为click创建一个hacky mousedown; setTimeout; mouseup模拟。

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

Answer 1

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

在Internet Explorer和Firefox中，不会为右侧或中间按钮触发click事件。

因此，我们无法在中间或右侧按钮上可靠地使用事件处理程序的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);
        }
    }
});

Answer 2

简短回答：不。

问题是，您希望捕获中间点击的内容是什么？中间点击不是要与当前页面交互，而是在新选项卡中打开链接。

Chrome目前正在努力放弃此行为：https://code.google.com/p/chromium/issues/detail?id=255

目前有关于此主题的w3c邮件列表的一般性讨论：http://lists.w3.org/Archives/Public/www-dom/2013JulSep/0203.html

但是现在，您可以在文档级别上捕获Firefox中的middleclicks：

$(document).on('click', function(e){
    console.log(e);
});

Answer 3

我已经建立了一个工厂，用于使用vanilla JS创建鼠标中键处理程序并使用最新的Firefox和Chrome ：

const MiddleClickHandlerFactory = (node, handlerFn) => {
  node.addEventListener('mousedown', e => {
    if (e.button !== 1) return;
    e.preventDefault();   // stop default scrolling crap! Instead install ScrollAnywhere!
    const originalTarget = e.target;
    document.addEventListener('mouseup', e => {   // register on DOCUMENT to be sure it will fire even if we release it somewhere else
      if (e.target.isSameNode(originalTarget)) handlerFn(e);
    }, {capture: true, once: true, passive: true});
  }, true)
};

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

'点击'有点分类

'mouseup'正常工作

3 个答案: