停止 SVG 鼠标按下时正文的鼠标按下事件

在这里，我试图在触发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 鼠标后触发身体鼠标按下。

看起来你很接近。下面的示例执行我认为您想要的操作。

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>

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 抛出错误，因为它在svgElem.onmousedown中找不到event参数

按如下方式更改您的代码。

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

相关内容

最新更新

热门标签：