Question

在这里，我试图在鼠标按下SVG时停止鼠标按下事件。我也试过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鼠标按下后，

体鼠标按下。

Answer 1

看起来你非常接近。以下示例执行我认为您想要的内容。

＆＃13;

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);
}

＆＃13;

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

＆＃13;

Answer 2

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因为在event

中找不到svgElem.onmousedown参数而引发错误

更改您的代码，如下所示。

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

在SVG鼠标停止时停止鼠标向下的事件

2 个答案: