检测鼠标中键点击事件jQuery

Question

当用户单击左键或中键时，我想显示一个jQuery-UI对话框作为弹出窗口。它适用于左键单击（我收到警报框，然后是弹出窗口），但对于中键则不起作用（既没有警报框也没有弹出窗口）。我错过了什么？

$('a.external').live('click', function(e){
  if( e.which <= 2 ) {
    e.preventDefault();
    alert ("inside if");
  }
  popUp.start(this);
});

- Chankey Pathak

---

在Chrome、FF和IE10上尝试过。 - Chankey Pathak

Answer 1

使用 mousedown 或 mouseup 代替 click。并且（除非你正在使用一个非常旧的版本的 jQuery）使用 .on() 而不是 .live()：

$(document).on("mousedown", "a.external", function(e) {
   if( e.which <= 2 ) {
      e.preventDefault();
      alert ("inside if");
   }
   popUp.start(this);
});

最好使用一个比 document 更接近链接的父元素。

演示： http://jsfiddle.net/7S2SQ/

- nnnnnn

---

你为什么要将"a.external"作为数据传递给事件处理程序？他不是把它用作选择器吗？ - Nate

@Nate - 我没有将"a.external"作为数据传递，这实际上是委托事件的选择器。请查看.on()文档。在这种情况下，mousedown事件绑定到文档，但当它发生时，jQuery会自动检查源元素是否与第二个参数中的选择器匹配（只有在匹配时才调用您的函数）。理想情况下，您不应该绑定到文档：正如我在答案中提到的，最好使用更接近链接的父级元素。 - nnnnnn

谢谢。(e.witch == 2) 表示中间按钮，以防万一。 - Jorge Olivares

@LucasBustamante - 是的，警告框与鼠标事件无关，只是为了演示目的而存在。 - nnnnnn

我非常确定在这种情况下警报是必要的，这样浏览器才能允许您绕过中键点击的本机功能。 - Lucas Bustamante

Answer 2

为了在 Firefox (40.0.3) 中完全实现这个功能，我需要按照以下方式实施 .on('mouseup', fn)。

$(selector).on('mouseup', function (e) {

    switch (e.which)
    {
        // Left Click.
        case 1:
            // By way of example, I've added Ctrl+Click Modifiers.
            if (e.ctrlKey) {
                // Ctrl+LeftClick behaviour.
            } else {
                // Standard LeftClick behaviour.
            }
            break;

        // Middle click.
        case 2:
            // Interrupts "Firefox Open New Tab" behaviour.
            break;

        // Default behaviour for right click.
        case 3:
            return;
    }

    // Pass control back to default handler.
    return true;
});

- Apache

---

@nnnnnn，感谢您的编辑。我不知道我怎么会错过那个地方。:-S - Apache