Right click stop propagation

前端未结

关注

 2  691

How do I stop the propagation for right click events in javascript, so parent elements do not detect them at all? When I click the link in the following html, left clicks are no

相关标签:

2条回答

攒了一身酷

2021-01-21 12:48

The 'right click' event is called the 'contextmenu' event.

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

Example:

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

0 讨论(0)

你的背包

2021-01-21 12:50

Chrome won't execute script tags, including a version , for some reason, so i replaced let with var...

Stopping the propagation of a contextmenu event triggered from a#Link to document works fine for me, in Chrome and Firefeox, here is the example i used.

Edit

the contextmenu events are detected by the document element as click events instead.

In this case you can use a mousedown event, and add the condition event.which === 3

I updated the example, and added an example on 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>

Now rightclicking in the following order gives us these outputs.

rightclick on document
rightclick on link (propagates on first click)
rightclick on link (doesn't propagate)

Screenshots are from Firefox 20.0

0 讨论(0)