用jQuery检测中间按钮点击（滚动按钮）

Question

我有一个带有标签的列表，可以在点击时播放一些 mp3 文件。使用 jQuery 绑定“click”事件时它工作正常：

$oo.data({'__mp3play':true,'wapiHandle':h+0,'wapiIndex':o.ajaxPlayList[h].length})
           .bind( 'click', function()
            { var wh = $j(this).data('wapiHandle');
              if( typeof o.regObjects[wh] == 'object' && o.regObjects[wh].play(this.href))
               { return false; }
            });

单击鼠标左键时： 加载我的 Flash 插件时它会禁用默认处理，否则它将正常打开。

但是： 当我使用鼠标的滚动按钮并单击它时，不会触发单击事件并且链接正常打开。

我曾尝试使用 mousedown 或 mouseup 事件，但没有帮助，链接总是正常打开，副作用是音乐也开始使用 Flash 播放器播放。

另外preventDefault() 根本不起作用。

谁能告诉我如何检测鼠标中键点击（滚动按钮点击）？

感谢您的 cmets。

PS：我已经尝试过有关此站点上可用的“中间按钮”的其他解决方案。

在所有类型的浏览器中测试，结果相同。

编辑： 这也不起作用，使用鼠标中键时链接将正常打开。使用鼠标左键时，没有任何反应。

$oo.bind( 'mousedown click mouseup', function(e)
{ e.preventDefault(); e.stopPropagation(); return false; });

Answer 1

好吧，经过快速测试，这三个似乎是按如下顺序排列的：

• 左 - 1
• 中 - 2
• 右 - 3

如果你有：

$(document).mousedown(function(e){
    switch(e.which)
    {
        case 1:
            //left Click
        break;
        case 2:
            //middle Click
        break;
        case 3:
            //right Click
        break;
    }
    return true;// to allow the browser to know that we handled it.
});

Answer 2

请不要在mousedown 事件期间触发点击操作。它忽略了事件管道的其余部分，违背了当前的用户期望和设计实践。

问题

以下是每种点击类型触发的事件的正常顺序：

$(document).on("mousedown mouseup click focus blur",function(e) {
  console.log("{" + e.which + ":" + e.type + "}"); 
});    

通常，我们处理最后一个 click 事件，因为它表示用户最终打算继续当前操作。

当指针设备按钮（通常是鼠标的主按钮）在单个元素上按下和释放时触发click事件>.

不幸的是，鼠标中键不会触发这样的事件（可能是因为这样做会迫使开发人员监听点击事件来区分多个可能的调用）。但是，如果我们想针对中间点击连接操作，我们应该遵循相同的 UX 期望。

解决方案

我们将监听mousedown 事件并立即为mouseup 事件附加一次性使用处理程序。如果按下中间键并且元素匹配，我们将trigger我们自己的custom event 类型为middleclick，我们将seed from the original event。

$(document).on("mousedown", function (e1) {
  $(document).one("mouseup", function (e2) {
    if (e1.which == 2 && e1.target == e2.target) {
      var e3 = $.event.fix(e2);
      e3.type = "middleclick";
      $(e2.target).trigger(e3)
    }
  });
});

这将有助于区分 if 中间按钮是否被单击以及在这种情况下我们希望如何处理它，因此我们可以为我们的自定义事件类型设置一个侦听器，如下所示：

$(document).on("middleclick", function (e) {
    console.log("{" + e.target.nodeName.toLowerCase() + ":" + e.type + "}"); 
});

jsFiddle 和 Stack Snippets 中的工作演示：

$(document).on("mousedown", function (e1) {
  $(document).one("mouseup", function (e2) {
    if (e1.which == 2 && e1.target == e2.target) {
    	var e3 = $.event.fix(e2);
      e3.type = "middleclick";
      $(e2.target).trigger(e3)
    }
  });
});

$(document).on("middleclick", function (e) {
  console.log("{" + e.target.nodeName.toLowerCase() + ":" + e.type + "}"); 
});

$(document).on("mousedown mouseup click focus blur",function(e) {
  console.log("{" + e.which + ":" + e.type + "}"); 
}); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>

<div  style="background:#31965a;color:white;width:100px;height:100px;line-height:100px;text-align:center;">
  Click Me!
</div>

* 在 Chrome、FF、Edge 和 IE11 中测试

Answer 3

好的，我想我明白了。这是fiddle that seems to work。诀窍（至少在 FF4 中）似乎是将点击处理程序绑定到 document 并让它停止传播。

$(document).click(function(e){
        //not checking for the right click will prevent the context-menu from showing, you may or may not want to do that
        if (e.which != 3) { 
            e.preventDefault();
            return false;
        }
    });

This solution was found on this forum page.

Answer 4

好吧，伙计们，

感谢您的意见。 '@no.good.at.coding' 有一个很好的解决方案，但不适用于 IE（请参阅本文后面的内容），但它是一个很好的起点。我把他的代码改成这样：

// Avoid relations will be opened in extra tab when clicking middle-scroll-button to open it
$(document).bind($.browser.msie ? "mousedown" : "click", function(e)
{
    if (e.which == 2 && e.target.tagName == 'A') 
    {
        var bIE = $.browser.msie,
            $o = $(e.target),
            oe = $o.data('events'),
            b = true,
            f = function(){};

        if (typeof oe == 'object' && oe['click']) {
            f = function(){ $o.trigger('click'); }
        } else {
            b = (typeof $o[0].href == 'string' && ($o[0].target == undefined || $o[0].target == '' || $o[0].target == '_self'));
            if (b) { 
                f = function () { window.location.href=$o[0].href; };
            }
        }

        if (!b) { return; }

        e.stopImmediatePropagation();
        e.stopPropagation();
        e.preventDefault();

        if (bIE)
        {
            if (!window.__swcp__) { 
                window.__swcp__= $('<div style="position:fixed;top:0px;left:0px;width:100%;height:100%;background:#000;display:block;z-index:9999;opacity:0.01;filter:alpha(opacity:1);" />').appendTo('body'); 
            }
            window.__swcp__.show();
        }

        setTimeout(f, 50);
        if (bIE) { 
            setTimeout( function() { window.__swcp__.hide(); }, 1000 );
        }

        return false;
    }
});

现在中键的作用类似于鼠标左键。正如你所看到的 IE 需要更多，我们必须将链接标签取消焦点 1 秒钟以避免它会在额外的选项卡中打开。我在这里使用一种简单的方法来执行此操作，创建一个“眼睛”透明 div（不透明度 = 0.01），它将放置在窗口内容上，因此页面上的任何链接都将不聚焦。 用户不会注意到任何区别，除了鼠标指针可以从指针变为默认指针，一秒钟后它又变回指针（仅限 IE）。我可以忍受这一点。

我接受这个作为答案，但如果您有更好的想法，请告诉我。

Answer 5

使用 HTML5 执行此操作的正确方法是使用 auxclick event。

例如，要完全禁用鼠标中键单击元素

    $element.on("auxclick.disablemiddleclick", function(e)
    {
        // https://developer.mozilla.org/en-US/docs/Web/API/Element/auxclick_event
        if (e.which === 2 && e.cancelable) // disable middle button click
        {
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            console.log("disabled middle click, e=", e);
        }
    });

（“auxclick”处理程序名称的后缀旨在允许使用$element.off("auxclick.disablemiddleclick") 轻松删除此处理程序，而无需跟踪函数引用。）

Answer 6

e.which 应该这样做：

简单示例：

$(document).ready(function(){
    $(document).mousedown(function(e){
         alert(e.which); // ##=> left
    }) 
})

Answer 7

如果您（像我一样）因为来自客户的奇怪的中间点击错误而发现此问题。而且您只希望任何中间或右键单击都像左键一样

忘记 IE 的所有蹩脚代码吧。

又短又甜：

$(document).click(function(e){
  // checking for any non left click and convert to left click.
  if (e.which != 1) { 
    e.which = 1;
  }
});

显然，如果您需要更多的歧视，您可以执行以下操作：

$('a.no-non-left-clickies').click(function(e){
  // checking for any non left click and convert to left click.
  if (e.which != 1) { 
    e.which = 1;
  }
});