我想知道为什么我的一些 Javascript 无法工作,直到我发现音频事件没有在 DOM 树中冒泡,例如timeupdate
-event。
是否有理由不让音频和视频标签的事件冒泡?
我想知道为什么我的一些 Javascript 无法工作,直到我发现音频事件没有在 DOM 树中冒泡,例如timeupdate
-event。
是否有理由不让音频和视频标签的事件冒泡?
事件冒泡之所以存在,是为了解决哪个元素是事件的预期目标的模棱两可的问题。那么,如果您单击一个 div,您的意思是单击该 div 还是它的父级?如果子级没有附加点击处理程序,则它会检查父级,依此类推。我相信你知道这是如何工作的。
音频事件不会冒泡的原因是因为它们对任何其他元素都没有意义。当您timeupdate
在音频元素上触发 a 时,无论它是用于音频元素本身还是其父 div 都没有歧义,因此无需冒泡。
您可以在此处阅读更完整的事件冒泡历史
事件委托
通过利用事件的捕获阶段,事件委托仍然是可能的。只需添加 true 作为 addEventListener 的第三个参数,如下所示:
document.addEventListener('play', function(e){
//e.target: audio/video element
}, true);
请注意,此事件不会冒泡,而是沿着 DOM 树向下移动,并且无法使用stopPropagation
.
如果您想将其与 jQuery 的 .on/.off 方法一起使用(例如具有命名空间和其他 jQuery 事件扩展)。从webshim 库中获取的以下函数应该会变得有用:
$.createEventCapturing = (function () {
var special = $.event.special;
return function (names) {
if (!document.addEventListener) {
return;
}
if (typeof names == 'string') {
names = [names];
}
$.each(names, function (i, name) {
var handler = function (e) {
e = $.event.fix(e);
return $.event.dispatch.call(this, e);
};
special[name] = special[name] || {};
if (special[name].setup || special[name].teardown) {
return;
}
$.extend(special[name], {
setup: function () {
this.addEventListener(name, handler, true);
},
teardown: function () {
this.removeEventListener(name, handler, true);
}
});
});
};
})();
用法:
$.createEventCapturing(['play', 'pause']);
$(document).on('play', function(e){
$('audio, video').not(e.target).each(function(){
this.pause();
});
});