After click on the box, take your mouse out of the browser window or that running screen and see the alert. Why this is happening, how can I terminate the mouseleave event after clicked outside the box?
['pointerup', 'mouseleave', 'touchend'].forEach(function(item) {
document.body.addEventListener(item, myy);
});
function myy(e) {
if (e.target.classList.contains('container')) {
console.log('clicked');
} else {
alert('yy');
}
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.container {
background: tomato;
height: 500px;
width: 600px;
display: flex;
justify-content: center;
align-items: top;
}
<div class="container">
<h3>
After click on the box, take your mouse out of the browser window or that running screen and see the alert.
</h3>
</div>