How to prevent the click from happening when you start to click on a child element

Question

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?

Does this answer your question? [How do I prevent a parent's onclick event from firing when a child anchor is clicked?](https://stackoverflow.com/questions/1369035/how-do-i-prevent-a-parents-onclick-event-from-firing-when-a-child-anchor-is-cli) — tauzN, May 08 '22 at 13:15
@tauzN it does not, i already did what the question is saying that is `e.stopPropagation()` the problem i have is when you start to click on the child element and release on the parent, the action still happens, i need a way to stop the propagation on the event that starts the click. — thiago kaique, May 08 '22 at 13:20

score 1 · Accepted Answer · answered May 08 '22 at 13:40

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.

How to prevent the click from happening when you start to click on a child element

1 Answers1