如何终止mouseleave效果值

Question

当您点击该框时，您将在mouseleave上看到测试的变化。当你点击按钮时，再次在测试中进行更改。当鼠标离开盒子时，在我们点击按钮后，我们如何删除测试中发生的事件并将其更改为原始位置？

这是代码：-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>

Answer 1

如果我理解正确，您想在光标离开红色框时通过单击按钮来恢复所做的更改吗？在这种情况下，您可以在注册事件侦听器时简单地添加useCapture参数：

['pointerup', 'mouseleave', 'touchend'].forEach(function(item) {
document.body.addEventListener(item, function(e) {
if(e.target.classList.contains('container')) {

test.innerHTML = 'Mouseleave';

} else {

}
}, true); //useCapture
});