在 SVG 鼠标按下时停止 body 的鼠标按下事件

Question

在这里，我试图在鼠标按下 SVG 时停止 body 的鼠标按下事件。我也试过 event.stopPropagation 但这里不起作用。这是我的代码。

var svgElem=document.getElementById("mySVG");
svgElem.onmousedown=function(){
        event.stopPropagation();
        event.preventDefault();
        console.log("svg down");
    }
document.body.onmousedown=function(){
        console.log("body down");
}

在 SVG 鼠标按下后触发 body 鼠标按下。

Answer 1

var svgElem=document.getElementById("mySVG");
svgElem.onmousedown=function(){
        event.stopPropagation();
        event.preventDefault();
        alert("svg down")
        console.log("svg down");
    }
document.body.onmousedown=function(){
        console.log("body down");
        alert("body down")
}

<body>
  <div id="mySVG">
    hey svg
  </div>
</body>

以上示例在 chrome 中有效，但在 firefox 中无效。

Firefox 抛出错误，因为它在 svgElem.onmousedown

中找不到 event 参数

如下更改代码。

svgElem.onmousedown=function(event){
        event.stopPropagation();
        event.preventDefault();
        console.log("svg down");
    }

Answer 2

看起来你很接近。以下示例可以满足您的要求。

function redClick(e) {
  e.preventDefault();
  e.stopPropagation();
  console.log('red clicked');
}
function bodyClick(e) {
  console.log('body clicked');
}
window.onload = function() {
 document.getElementById('noclick').addEventListener('mousedown',redClick,false);
 document.body.addEventListener('mousedown',bodyClick,false);
}

<div style="background:grey;width:100%;height:6em;">click me too.
<div id="noclick" style="color:white;width:50%;height:3em;background:red">click me :]</div>
</div>

在 SVG 鼠标按下时停止 body 的鼠标按下事件

stop the mouse down event of body on SVG mouse down

javascript

svg

onmousedown