I have a element with a click event with a child with another click event. And i did the following solution to prevent the parent action to happen when you click in the child element
const parent = document.getElementById("parent")
parent.addEventListener("click", e =>{
alert("clicked")
})
const child = document.getElementById("child")
function prevent(e)
{
e.stopPropagation()
e.preventDefault()
}
child.addEventListener("click", prevent)
child.addEventListener("mousedown", prevent)#parent{
width:300px;
height:300px;
background-color:yellow;
display: flex;
justify-content: center;
align-items: center;
}
#child{
width:100px;
height:100px;
background-color:red;
}<div id="parent">
<div id="child">
</div>
</div>However when you hold down the button in the child element and release in the parent the click happens, is there a way to prevent that?
This is surprisingly tricky (or I'm missing something obvious).
The below handles it by remembering the last mousedown (in a way that's unlikely to be bypassed by other handlers) and then ignoring the click event on parent if the mousedown passed through child.
let lastMouseDown = null;
// Use a capture handler on mousedown to remember that
// mousedown event (a capture handler so we see the event
// even if something stops propagation -- unless somebody
// registered a capture handler before us and stopped
// immediate propagation, which isn't all that likely
document.addEventListener(
"mousedown",
event => {
lastMouseDown = event;
},
true // A capture handler
);
const parent = document.getElementById("parent");
parent.addEventListener("click", e => {
// If the last mousedown event passed through the
// child, ignore this click
if (lastMouseDown && child.contains(lastMouseDown.target)) {
prevent(e);
return;
}
console.log("clicked");
});
const child = document.getElementById("child");
function prevent(e) {
e.stopPropagation();
e.preventDefault();
}
child.addEventListener("click", prevent);
child.addEventListener("mousedown", prevent);#parent{
width:300px;
height:300px;
background-color:yellow;
display: flex;
justify-content: center;
align-items: center;
}
#child{
width:100px;
height:100px;
background-color:red;
}<div id="parent">
<div id="child">
</div>
</div>It works in this example, but I can't say I'm very happy with it.