点击事件和鼠标中键的问题

Question

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

问题是在IE或Firefox浏览器上无法使用中间按钮。 实际上，只有在Chrome浏览器中才会调用使用中间按钮的countLinks函数。

我认为我需要一个类似于mouseup事件的Jquery函数，但我不知道如何调用该函数，并使用这些参数调用countLinks函数。

有什么帮助吗？

- markzzz

---

可能是使用中键触发onclick事件的重复问题。 - rds

Answer 1

你说得对。您需要 mousedown 或 mouseup 事件来确定实际点击了哪个鼠标按钮。

但首先，您需要摆脱内联事件处理程序 onclick 并遵循 非侵入式 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 属性将包含一个数字，指示点击了哪个鼠标按钮。

- jAndy

---

+1 但为什么不用 click？您还可以查看已单击的按钮是左、中还是右...在跨浏览器上，mouseup 和 mousedown 的行为可能会有所不同。 - Sinan

@Sinan Y.：JavaScript的click事件结合了mousedown + mouseup，仅在左键点击时触发。 - jAndy

嗯...所以我需要为每个情况（1-2-3）放置同一个函数的副本吗？我该如何将参数（例如$row[6]和$indexl）传递给该函数？ - markzzz

我知道点击是两者的组合，不管怎样我的错，我记得它的行为很奇怪，可能我和其他东西混淆了，但我现在测试了，你绝对是正确的，对于文本污染我感到抱歉 :) - Sinan

Answer 2

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

我会按照以下方式创建链接：

``` ... ```

在这里，我们将您的参数放入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;)

希望这能成功。Sinan。

附注：我的 myClazzz 代码灵感来自 jAndy :)

- Sinan

---

uoo...从来没有见过链接中的那种语法（我的意思是data-var stat）。我需要学习它 :) 明天我会检查一下那个函数，现在在意大利（凌晨3点）有点晚了！谢了，伙计。 - markzzz

FYI：$(this).data('row')与$(this).attr('data-row')是相同的。 - WildlyInaccurate

Answer 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
  }
);

这有点像一个技巧（通常你会在链接本身上监听事件），但它是有效的。

- Matthew Flaschen