我有一个使用on('touchstart')
jQuery方法附加事件侦听器的Java代码片段"代码片段1-它在用户touch 交互上播放通过AJAX加载的html视频".我需要能够切换事件侦听器打开和关闭或删除和重新绑定它们.我遇到的问题是on('touchstart')
方法继续调用函数(播放页面上的所有视频)每个用户交互.
我需要事件侦听器调用的函数在最初的touch 交互,然后禁用,直到AJAX加载更多的内容"视频".在每次AJAX成功之后,我希望重新绑定/重新添加事件侦听器,以便该函数再次工作.
Code Snippet 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);
}
}
}
我已经try 了以下解决方案,但都没有成功.
try %1.将布尔属性{once: true}
添加到EventListener,但没有提供所需的结果.布尔属性将只允许函数执行一次.
try 2.我对EventListener使用了one()
而不是on()
方法,但是它提供了与{once : true}
相同的结果
try 3.我try 了document.body.addEventListener
&;document.body.removeEventListener
方法,并将EventListeners重新格式化为"请参阅本段下面的代码片段",但"emoveEventListener"方法会立即执行,而不是在调用函数时执行.
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
});
}
try 4.我目前正在研究更多的布尔属性,包括unbind&;rebind方法、Delegation方法、SetTimOut和SetInterval方法,但还没有成功.