I'm wondering if there's a clean way to control event propagation where I can stop an event from going further down, but bubble back up from there:
<div className="App">
<div
style={{
background: "black",
width: "100%",
height: 400
}}
onMouseUp={(e) => {
alert("outer div");
}}
>
<div
style={{
background: "red",
width: "90%",
height: 300
}}
onMouseUp={(e) => {
alert("middle div");
}}
onMouseUpCapture={(e) => {
//want to skip inner div but
//have middle & outer div alerted
}}
>
<div
style={{
background: "blue",
width: "80%",
height: 150
}}
onMouseUp={(e) => {
alert("inner div");
}}
></div>
</div>
</div>
</div>
Here I want to skip all onClick/onMouseUp events from the middle div but still retain the events that bubble up from the middle div. Is there a way to cleanly achieve this? For context, I am implementing a draggable button that has a react-dom link to it and I can't seem to prevent it from navigating when I let go after dragging.
stopPropagation('#middle-div', 'mouseup');
function stopPropagation(id, event) {
$(id).on(event, function(e) {
alert("middle div");
e.stopPropagation();
return false;
});
}