How to remove mouseleave event if it exits?

Question

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>