在SVG鼠標按下時停止鼠標向下的事件

在這裏，我試圖停止鼠標按下SVG時鼠標向下的事件。我也嘗試過event.stopPropagation，但這裏不起作用。這是我的代碼。在SVG鼠標按下時停止鼠標向下的事件

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鼠標關閉後，主體鼠標被關閉。

來源

2017-06-15 Dinesh Pathak DK

您的代碼完美的作品。看看[this]（https://jsfiddle.net/27rstd0p/） –

那個小提琴在Chrome中工作，並沒有在Firefox中。 –

[如何停止點擊複選框上的事件冒泡]可能的重複（https://stackoverflow.com/questions/1164213/how-to-stop-event-bubbling-on-checkbox-click） – Tigger

看起來你很近。下面的示例做了我認爲你想要的。

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>

來源

2017-06-15 08:14:08 Tigger

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

來源

2017-06-15 08:10:43

在SVG鼠標按下時停止鼠標向下的事件

回答

相關問題