3

重複の可能性：
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>

アップデート：

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>
4

1 に答える 1

3

clickマウスの左クリックでのみトリガーされますが、マウスのmousedown左/中/右クリックでトリガーできます。したがって、コード内で に置き換えclick、mousedownチェックして左/中央/右クリックを区別しますevent.which。例については、jQuery でマウスの左クリックと右クリックを区別する方法を参照してください。

ところで: このリンクclickを確認すると、mousedownとmouseupイベントの関係を理解するのに役立つ場合があります。そして、この記事: Javascript Madness: Mouse Eventsも役立つかもしれません。経験則として、マウス イベントをより詳細に制御する必要がある場合は、またはのような高レベル イベントではなく、mousedownまたはのような低レベル イベントを処理することをお勧めします。mouseupclickdblclick

mydivもう 1 つの問題は、HTML の前に余計な「#」を付けることです。

更新: 新しい要件に従って、次のコードを追加して、イベントの伝播を回避できます。

$("#good_button").mousedown(function(e) {
    e.stopPropagation(); // avoid triggering its parent
    div = $("#hide").fadeToggle(300);
});
于 2013-01-03T09:05:34.580 に答える