onClick() 和鼠标中键的问题答案

【问题标题】：Issue with onClick() and middle button on mouseonClick() 和鼠标中键的问题
【发布时间】：2011-03-17 09:47:34
【问题描述】：

<a href="<?=$rowz[0]?>" onClick="countLinks('<?=$row[6]?>','<?=$indexl?>')">[Link <?=$j++?>]</a>

问题是它不适用于 IE 或 firefox 上的中间按钮。实际上，使用中间按钮的countLinks 只在chrome中调用。

我想我需要一个像 mouseup 事件这样的 Jquery 函数，只是我不知道如何调用该函数，它使用这些参数参数调用 countLinks。

有什么帮助吗？

【问题讨论】：

Triggering onclick event using middle click 的可能重复项

标签： jquery onclick jquery-events

【解决方案1】：

你是对的。您需要一个mousedown 或mouseup 事件来确定实际单击了哪个鼠标按钮。

但首先，你需要摆脱那个内联事件处理程序onclick 并遵循unobtrusive javascript的光明之路。

那你需要给那个锚点一个id 或class 标签来识别它（当然你也可以选择用css选择器选择那个锚点）。假设我们添加了一个名为 myClazzz 的类 :)

javascript：

$(function(){
    $('.myClazzz').bind('mouseup', function(e){
        switch(e.which){
           case 1:
              alert('Left Mouse button pressed.');
           break;
           case 2:
              alert('Middle Mouse button pressed.');
           break;
           case 3:
              alert('Right Mouse button pressed.');
           break;
           default:
              alert('You have a strange Mouse!');
        }
    });
});

mousedown / mouseup 事件处理程序中的 which 属性将包含一个数字，指示单击了哪个鼠标按钮。

【讨论】：

+1 但为什么不click？您还可以查看单击的按钮是左键、中键还是右键... Mouseup mousedown 跨浏览器的行为可能会有所不同。
@Sinan Y.: javascript click 事件结合了mousedown + mouseup 并且仅在单击左键时触发。
嗯...所以我需要为每个案例（1-2-3）放置相同功能的副本？以及如何将参数（如 $row[6] 和 $indexl）传递给该函数？
我知道点击是两者的结合，反正我的错我记得它的行为很奇怪，可能我和其他东西混在一起了，但我现在测试了，你绝对是对的，抱歉文字污染:)

【解决方案2】：

这是一个快速的解决方案，通过使用一些html5 attributes...实际上在 html5 之前也可以，但它没有验证。

我会创建如下链接：

<a class="myClazzz" href="<?=$rowz[0]?>" data-row="<?=$row[6]?>" data-index="<?=$indexl?>">...</a>

_这里我们把你的参数放到data属性中

并像这样编写js：

$(function(){
    //use mouseup, then it doesn't matter which button 
    //is clicked it will just fire the function
    $('.myClazzz').bind('mouseup', function(e){
        //get your params from data attributes
        var row   = $(this).attr("data-row"),
            index = $(this).attr("data-index");

        //and fire the function upon click
        countLinks(row,index);
    });
});
//don't forget to include jquery, before these lines;)

希望这能解决。思南。

PS myClazzz -> 归功于 jAndy :)

【讨论】：

uoo...以前从未在链接上看到过这种语法（我的意思是 data-var stat）。我需要学习它:) 明天我会检查那个功能，现在在意大利（凌晨 3 点）有点晚了！ tnx 男人
仅供参考：$(this).data('row') 与 $(this).attr('data-row') 相同

【解决方案3】：

这种行为因浏览器而异。见https://code.google.com/p/chromium/issues/detail?id=255#c106。据此，在您询问的人中：

"如果目标是链接，IE 不会触发点击事件，但如果另一个元素被点击，即使它是链接的后代。”
“Gecko 总是在冒泡的文档上触发点击事件定位被点击的元素。”

对于 Firefox，您可以这样做：

$( document ).click(
  function ( evt ) {
    // ... evt.which === 2 means middle click
  }
);

这是一种技巧（通常您会在链接本身上监听事件），但它确实有效。

【讨论】：