Right click stop propagation

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 not detected, but right clicks are detected by the document element as 'click' events instead of 'contextmenu' events. I've tried to attach event listeners to mousedown, contextmenu, but to no success.

[EDIT] Changing the code to contextmenu works on chrome but not firefox (v23.0.1), this is probably a firefox bug.

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

标签： javascript

2条回答

▲ chillily

2楼-- · 2020-04-16 03:48

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) 举报

看我几分像从前

3楼-- · 2020-04-16 03:51

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) 举报

Right click stop propagation

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间