如何在单击事件后停止mouseover和mouseout功能

Question

I have been trying to stop a mouseover and mouseout function after a click event but it does not work:

 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').;
        })

What i'm trying is to play the video with sound after a click, but instead, it continues with the mouseover effect.

Thank you! and sorry for bad english

Answer 1

Use removeEventListener to remove attached event handler

function mouseoverfunc() {
            video = this.querySelector('video');
            if (video.muted == true) {
                video.muted = false;
            } else {
                video.muted = true;}
        }
document.querySelectorAll('.box').forEach(function(x){
        x.addEventListener("mouseover",mouseoverfunc, false) 
        x.addEventListener("mouseout", function () {
            this.querySelector('video').muted = true;
              }, false)
        x.addEventListener("click", function () {
            this.removeEventListener('mouseover',mouseoverfunc);
        })