How to terminate the mouseleave effect value?

Question

When you will click on the box, you will see the change in test on mouseleave. And when you will click on the button, again a change in the test. When the mouseleave on the box, after we click on button, how can we remove that event happend on the test and change it to the original position?

Here is the code:- 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

If I understood you correctly, you want revert the changes made by clicking the button when cursor leaves the red box? In that case you could simply add useCapture parameter when registering an event listener:

['pointerup', 'mouseleave', 'touchend'].forEach(function(item) {
        document.body.addEventListener(item, function(e) {
            if(e.target.classList.contains('container')) {
                
                test.innerHTML = 'Mouseleave';
                
            } else {
      
        }
        }, true); //useCapture
    });