Sometimes, we want to stop propagation of mousedown or mouseup from a click handler with JavaScript.

In this article, we’ll look at how to stop propagation of mousedown or mouseup from a click handler with JavaScript.

How to stop propagation of mousedown or mouseup from a click handler with JavaScript?

To stop propagation of mousedown or mouseup from a click handler with JavaScript, we can call stopPropagation.

For instance, we write:

<div id="outer">
  <div id="inner">
    hello world
  </div>
</div>

to add a inner div.

Then we write:

const inner = document.getElementById('inner')
inner.onmouseup = (e) => {
  e.stopPropagation()
}
inner.onmousedown = (e) => {
  e.stopPropagation()
}

to select the inner div with getElementById.

Then we set the onmouseup and onmousedown properties to a function that calls stopPropagation to stop propagation of the mouseup and mousedown events triggered by the div.

Conclusion

To stop propagation of mousedown or mouseup from a click handler with JavaScript, we can call stopPropagation.