stop the mouse down event of body on SVG mouse down

Question

Here, i am trying to stop the mouse down event of body when mouse down of SVG if fired. I also tried the event.stopPropagation but here it is not working. Here is my code.

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

body mouse down is fired after SVG mouse down.

Your code works perfectly. Look at [this](https://jsfiddle.net/27rstd0p/) — Kishor Pawar, Jun 15 '17 at 08:03
Possible duplicate of [How to stop event bubbling on checkbox click](https://stackoverflow.com/questions/1164213/how-to-stop-event-bubbling-on-checkbox-click) — Tigger, Jun 15 '17 at 08:25

score 3 · Accepted Answer · answered Jun 15 '17 at 08:14

Looks like you were pretty close. The following sample does what I think you want.

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>

Kishor Pawar · Answer 2 · 2017-06-15T08:18:20.527

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>

Above example works in chrome and doesn't in firefox.

Firefox is throwing error as it doesn't find event parameter in svgElem.onmousedown

change your code as below.

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

stop the mouse down event of body on SVG mouse down

2 Answers2