Stop propagation at capture phase & continue on bubble phase

Question

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.

Answer 1

Use Event.stopPropgation().

stopPropagation('#middle-div', 'mouseup');
function stopPropagation(id, event) {
    $(id).on(event, function(e) {
        alert("middle div");
        e.stopPropagation();
        return false;
    });
}