Me pregunto si hay una forma limpia de controlar la propagación de eventos en la que puedo evitar que un evento vaya más abajo, pero que vuelva a subir desde allí:
<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>Aquí quiero omitir todos los eventos onClick/onMouseUp del div medio, pero aún así conservar los eventos que brotan del div medio. ¿Hay alguna manera de lograr esto limpiamente? Para el contexto, estoy implementando un botón arrastrable que tiene un enlace de reacción y parece que no puedo evitar que navegue cuando lo suelto después de arrastrar.
Utilice Event.stopPropgation() .
stopPropagation('#middle-div', 'mouseup'); function stopPropagation(id, event) { $(id).on(event, function(e) { alert("middle div"); e.stopPropagation(); return false; }); }