javascript - 右クリックで伝播を停止

Question

親要素がそれらをまったく検出しないように、JavaScriptで右クリックイベントの伝播を停止するにはどうすればよいですか? 次の html のリンクをクリックすると、左クリックは検出されませんが、右クリックは document 要素によって「contextmenu」イベントではなく「click」イベントとして検出されます。イベントリスナーをマウスダウン、コンテキストメニューに接続しようとしましたが、成功しませんでした。

[編集] コードを contextmenu に変更すると、Chrome では機能しますが、Firefox (v23.0.1) では機能しません。これはおそらく Firefox のバグです。

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="application/javascript;version=1.8">

function log(s){
    document.getElementById('log').innerHTML+=s+'<br/>';
}

window.onload=function(){
    document.addEventListener('click',function(e){
        log('click detected');
    },false);

    let link=document.querySelector('a#link');
    //click only cares about left clicks
    link.addEventListener('click',function(e){
        e.stopPropagation();
        return false;
    },false);
};

</script>
</head>

<body>

<a id="link" href="javascript:void(0);">Link</a>

<div id="log"></div>

</body>
</html>

score 2 · Accepted Answer

「右クリック」イベントは「contextmenu」イベントと呼ばれます。

http://www.quirksmode.org/dom/events/contextmenu.html

例：

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>

function log(s){
        document.getElementById('log').innerHTML+=s+'<br/>';
}

window.onload=function(){
        document.addEventListener('click',function(e){
                log('click detected');
        },false);

        document.addEventListener('contextmenu', function(e){
                log('right-click detected');
        }, false);

        var link=document.querySelector('a#link');

        link.addEventListener('click',function(e){
                e.stopPropagation();
                return false;
        },false);

        link.addEventListener('contextmenu',function(e){
                e.stopPropagation();
                return false;
        },false);
};

</script>
</head>

<body>

<a id="link" href="javascript:void(0);">Link</a>

<div id="log"></div>

</body>
</html>

score 0 · Accepted Answer

Chrome は何らかの理由で version を含む script タグを実行しないため、...に置き換えletました。var

からトリガーされたcontextmenuイベントの伝播を停止することは、ChromeとFirefeoxでうまく機能します。これが私が使用した例です。a#Linkdocument

編集

contextmenu イベントは、代わりにクリックイベントとしてドキュメント要素によって検出されます。

この場合、mousedownイベントを使用して、条件を追加できます。event.which === 3

例を更新し、 JSBinに例を追加しました

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body>

<a id="link" href="javascript:void(0);">Link</a> 
<div id="log"></div>

<script type="application/javascript">
window.onload = function () {
  var link = document.querySelector('a#link');

  function log(s) {
      document.getElementById('log').innerHTML += s + '<br/>';
  }

  document.addEventListener('mousedown', function (e) {
    if (e.which === 3) {
      var src = e.target || e.srcElement;
      log((src.nodeName === 'A' ? 'bubbled' : 'direct') + ' contextmenu on document detected');
    }
  }, false);

  link.addEventListener("mousedown", propagate);

  function propagate(e) {
    if (e.which === 3) {
      log("contextmenu on link, propagating");
      link.removeEventListener("mousedown", propagate);
      link.addEventListener("mousedown", nopropagate);
    }
  }

  function nopropagate(e) {
    if (e.which === 3) {
      log("contextmenu on link, nopropagating");
      e.stopPropagation();
    }
  }
}
</script>
</body>
</html>

次の順序で右クリックすると、これらの出力が得られます。

ドキュメントを右クリック
リンクを右クリック (最初のクリックで伝播)
リンクを右クリック (反映されません)

スクリーンショットは Firefox 20.0 のものです

javascript - 右クリックで伝播を停止

2 に答える 2

Related

Reference