Clicking on the box will trigger a change in the text on mouseleave. Clicking on the button will also cause another change in the text. How can we revert the text back to its original position after removing the effects triggered by clicking the button and mouseleave on the box?
Check out the code here: 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 undo the effect triggered by the button click?';
} 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>