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插件加载时禁用默认处理，否则它将正常打开。

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

我曾试图使用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

好的，我想我已经知道了。这是一个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 3

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

问题

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

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

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

在单个元素<按下并释放时，指针设备按钮（通常是鼠标的主按钮）会触发click事件/ em>的

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

解决方案

我们会监听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) } }); });

这有助于确定如果单击中间按钮，我们想要在这种情况下如何处理它，所以我们可以为我们的自定义事件类型设置一个监听器： / p>
$(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和＆amp ;;中测试IE11 的

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秒，以避免它在额外的标签中打开。我在这里使用一种简单的方法来创建一个'for the eye'透明div（opacity = 0.01），它将被放置在窗口内容上，因此页面上的任何链接都将是未聚焦的。用户不会注意到任何差异，除了鼠标指针可以从指针更改为默认值，并在一秒后它变回指针（仅限IE）。我可以忍受这一点。

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

Answer 5

e。应该这样做：

简单示例：

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

Answer 6

使用 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 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;
  }
});

使用jQuery检测中键单击（滚动按钮）

7 个答案:

问题

解决方案

jsFiddle和Stack Snippets中的工作演示：