Tengo un elemento con un evento de clic con un elemento secundario con otro evento de clic. E hice la siguiente solución para evitar que suceda la acción principal cuando hace clic en el elemento secundario
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>Sin embargo, cuando mantiene presionado el botón en el elemento secundario y lo suelta en el elemento principal, se produce el clic, ¿hay alguna forma de evitarlo?
Esto es sorprendentemente complicado (o me estoy perdiendo algo obvio).
Lo siguiente lo maneja recordando el último mousedown (de una manera que es poco probable que otros controladores lo pasen por alto) y luego ignora el evento de clic en el elemento principal si el mousedown pasó a través del elemento secundario.
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>Funciona en este ejemplo, pero no puedo decir que estoy muy contento con él.