如何在单击事件后停止鼠标悬停和鼠标退出功能

Question

我一直在尝试在单击事件后停止鼠标悬停和鼠标退出功能，但它不起作用：

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

我正在尝试在单击后播放有声视频，但相反，它继续使用鼠标悬停效果。

谢谢！对不起英语不好

Answer 1

使用 removeEventListener 删除附加的事件处理程序

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