jQuery右键点击div

Question

可能重复：
如何使用jQuery区分左右鼠标单击

当我单击div内部的右键时，如何打开上下文菜单。因为当我在div内部用右键单击时，它会淡出。

Javascript

$("#link").click(function(e){
   e.stopPropagation();
   div = $("#mydiv").fadeToggle(300);
});

$("#mydiv").click(function(e){
   e.stopPropagation();
});

$(document).click(function(e){
   $('#mydiv').fadeOut(200);
});

HTML

<a id="link">Click</a>
<div id="mydiv" style="width: 200px; height: 200px;">Hello</div>

UPDATE:

Javascript

$("#link").click(function(e){
   e.stopPropagation();
   div = $("#mydiv").fadeToggle(300);
});

$("#good_buttom").click(function(e){
   e.stopPropagation();
   div = $("#hide").fadeToggle(300);
});

$("#mydiv").mousedown(function(e) {
switch (e.which) {
    case 1:
         e.stopPropagation();
         $('#mydiv').fadeOut(200);
        break;
    case 2:
        alert('2');
        break;
    case 3:
        alert('3');
        break;
    default:
        alert('You have a strange mouse');
}
});

HTML

<a id="link">Click</a>
<div id="mydiv" style="width: 200px; height: 200px;">
    <button id="good_button">Click IT</button>
    <div id="hide" style="display:none;">Show up.</div>
</div>

- andys

---

嗨，我在看这篇文章，但是不太理解... 我是 JQuery 的新手... 有什么帮助吗？ - andys

Answer 1

click只能通过鼠标左键单击触发，而mousedown可以通过鼠标左/中/右键触发。因此，在您的代码中将click替换为mousedown，并通过检查event.which来区分左/中/右键点击。请参阅如何使用jQuery区分左右鼠标单击进行示例。

顺便说一句：查看这个链接可能有助于您了解click、mousedown和mouseup事件之间的关系。而这篇文章：Javascript Madness: Mouse Events也许也会有所帮助。作为一个经验法则，当您需要更多地控制鼠标事件时，最好处理低级别的事件，如mousedown或mouseup，而不是高级别的事件，如click或dblclick。

还有一个问题是，在HTML中您在mydiv之前放了一个多余的“#”。

更新：根据您的新要求，您可以添加以下代码以避免事件传播。

$("#good_button").mousedown(function(e) {
    e.stopPropagation(); // avoid triggering its parent
    div = $("#hide").fadeToggle(300);
});

- Hui Zheng

---

谢谢您的回复，我已经尝试了但是没有正常工作。我在div里面放了一个按钮，当我想要点击它时，div就会淡出...所以mousedown不好用吗？ - andys

刚发现你在HTML中mydiv前面多加了一个“#”号。 - Hui Zheng

请帮助我，因为我迷失了方向。 - andys

我刚刚更新了我的回答。 - Hui Zheng

实际上，在Chrome、Safari、Opera 14+和IE中，中间按钮也会触发点击事件。 - Nergal