使用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()根本不起作用.

有人可以告诉我如何检测鼠标中键单击(滚动按钮单击)？

谢谢您的意见.

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当在单个元素上按下并释放指针设备按钮（通常是鼠标的主按钮）时，将触发该事件。

不幸的是，按下鼠标中键不会触发此类事件（可能是因为这样做会迫使开发人员侦听click事件以区分多个可能的调用）。但是，如果我们想针对中间点击进行操作，则应该遵循相同的用户体验期望。

解

我们将监听mousedown事件，并立即为事件附加一个准时使用处理程序mouseup。如果按下了中间键，并且元素匹配，那么我们将触发类型为type 的自定义事件middleclick，该事件将从原始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)
    }
  });
});

这将帮助分离出来，确定是否中间的按钮被点击了我们如何，我们要处理它在这种情况下，所以我们可以设置我们的自定义事件类型这样的监听器：

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

jsFiddle和Stack片段中的工作演示：

$(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

好的,我想我已经知道了.这是一个似乎有用的小提琴.诀窍(至少使用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;
        }
    });

此解决方案可在此论坛页面上找到.

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）。我可以接受这一点。

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