使用 jQuery on() 和 off() 切换事件监听器

Question

我有一个 JavaScript 代码片段“代码片段 1 - 在用户触摸交互上播放通过 Ajax 加载的 html 视频”，它使用

on('touchstart')

jQuery 方法来附加事件侦听器。我需要能够打开和关闭事件侦听器或删除并重新绑定它们。我遇到的问题是

on('touchstart')

方法在每次用户交互时继续调用该函数（播放页面上的所有视频）。

我需要事件监听器来调用初始触摸交互上的函数，然后禁用，直到ajax加载更多内容“视频”。每次 Ajax 成功后，我想重新绑定/重新添加事件监听器，以便该功能再次工作。

代码片段1

function videoEvents2() {
    Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
        get: function() {
            return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
        }
    });

    $(document).on('click', 'body', playVideoOnLowPower);
    $(document).on('touchstart', 'body', playVideoOnLowPower);

    function playVideoOnLowPower() {
        try {
            const videoElements = document.querySelectorAll("video");
            for (i = 0; i < videoElements.length; i++) {
                if (videoElements[i].playing) {
                    // video is already playing so do nothing
                    console.log('Playing');
                } else {
                    // video is not playing so play video now
                    videoElements[i].play();
                    console.log('Not Playing');
                }
            }
        } catch (err) {
            console.log(err);
        }
    }
}

我已经尝试过以下解决方案，但没有成功。

尝试1.向事件监听器添加布尔属性

{once: true}

，但没有提供预期的结果。布尔属性只允许函数执行一次。

尝试 2.我对事件侦听器使用

one()

而不是

on()

方法，但它提供与

{once : true}

相同的结果

尝试 3。我尝试了

document.body.addEventListener

和

document.body.removeEventListener

方法，其中 eventListener 重新格式化为“请参阅本段下面的代码片段”，但是“removeEventListener”方法会立即执行，而不是在调用函数时执行。

document.body.addEventListener("click", playVideoOnLowPower, {
    once: true
});
document.body.addEventListener("touchstart", playVideoOnLowPower, {
    once: true
});

function dsdvideoEvents3 {
    document.body.removeEventListener("click", playVideoOnLowPower, {
        once: true
    });
    document.body.removeEventListener("touchstart", playVideoOnLowPower, {
        once: true
    });
}

尝试4。我目前正在研究更多布尔属性、Unbind & Rebind 方法、委托方法、SetTimOut 和 SetInterval 方法，但还没有取得任何成功。

Answer 1

创建一个保存点击次数的标志，例如我在这里创建了

var clickCount = 0;

，并在您调用

playVideoOnLowPower()

时增加它，并在

ajaxCall

成功时将其重置为0。还要检查

clickCount

方法中的

playVideoOnLowPower

值，如果它大于 0，则返回而不执行任何操作，否则执行您的逻辑。请参阅以下示例。

var clickCount = 0;

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
  get: function() {
    return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
  }
});

document.body.addEventListener("click", playVideoOnLowPower);
document.body.addEventListener("touchstart", playVideoOnLowPower);

function playVideoOnLowPower() {
  try {
    if (clickCount > 0) {
      return;
    }
    clickCount = 1;
    const videoElements = document.querySelectorAll("video");
    for (i = 0; i < videoElements.length; i++) {
      if (videoElements[i].playing) {
        // video is already playing so do nothing
        console.log('Playing');
      } else {
        // video is not playing so play video now
        videoElements[i].play();
        console.log('Not Playing');
      }
    }
  } catch (err) {
    console.log(err);
  }
}

$("#getVideo").off("click").on("click", function() {
  getVideo()
});

function getVideo() {
  $.ajax({
    url: 'https://dummyjson.com/http/200/mov_bbb.mp4',
    success: function(data) {
      if (data.status == 200) {
        var videoHtml = `<video width="400" controls>
                           <source src="https://www.w3schools.com/html/${data.message}" type="video/mp4">
                       </video>`;
      }
      $('#main2').append(videoHtml);
      videoEvents();
      clickCount = 0;
    }
  });

}

function videoEvents() {
  $("video").on('play', function() {
    $(this).prop('muted', false);
  });

  $("video").on('pause', function() {
    $(this).prop('muted', true);
  });

  $("video").on('ended', function() {
    $(this).prop('muted', true);
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main2"></div>
<button id="getVideo">Add next video</button>