Cuando haga clic en el cuadro, verá el cambio en la prueba en mouseleave. Y cuando haga clic en el botón, nuevamente un cambio en la prueba. Cuando el mouse deja el cuadro, después de hacer clic en el botón, ¿cómo podemos eliminar ese evento que sucedió en la prueba y cambiarlo a la posición original?
Aquí está el código: - https://jsfiddle.net/jcg8e0yL/
const test = document.getElementById('test'); ['pointerdown', 'mousedown', 'touchstart'].forEach(function(item) { document.body.addEventListener(item, function(e) { if(e.target.classList.contains('ignore')) { test.innerHTML = 'HOw to terminate the up effect?'; } else { } }); }); ['pointerup', 'mouseleave', 'touchend'].forEach(function(item) { document.body.addEventListener(item, function(e) { if(e.target.classList.contains('container')) { test.innerHTML = 'Mouseleave'; } else { } }); }); <h2 id="test" class="test"> Previous </h2> <div class="container"> <button style="cursor: pointer;" class="ignore">Click me</button> </div>Si lo entendí correctamente, ¿quiere revertir los cambios realizados haciendo clic en el botón cuando el cursor sale del cuadro rojo? En ese caso, simplemente podría agregar el parámetro useCapture al registrar un detector de eventos:
['pointerup', 'mouseleave', 'touchend'].forEach(function(item) { document.body.addEventListener(item, function(e) { if(e.target.classList.contains('container')) { test.innerHTML = 'Mouseleave'; } else { } }, true); //useCapture });