title: How to stop mouseover and mouseout function after a click event
body: <p>I have been trying to stop a mouseover and mouseout function after a click event but it does not work:</p>
  
  <pre><code> document.querySelectorAll('.box').forEach(function(x){
          x.addEventListener("mouseover", function () {
              video = this.querySelector('video');
              if (video.muted == true) {
                  video.muted = false;
              } else {
                  video.muted = true;}
          }, false)
          x.addEventListener("mouseout", function () {
              this.querySelector('video').muted = true;
                }, false)
          x.addEventListener("click", function () {
              this.off('mouseover').;
          })
  </code></pre>
  
  <p>What i'm trying is to play the video with sound after a click, but instead, it continues with the mouseover effect.</p>
  
  <p>Thank you! and sorry for bad english</p>