为什么音video事件没有泡沫?
我想知道为什么我的一些JavaScript不工作,直到我认为audio事件没有冒泡的DOM树,例如timeupdate
事件。
是否有理由不让audio和video标签泡泡的事件发生?
事件冒泡存在的原因是解决了事件的预期目标是哪个元素的模糊问题。 所以,如果你点击一个div,你的意思是点击div或其父? 如果孩子没有连接点击处理程序,则会检查父级,等等。 我相信你知道这是如何工作的。
audio事件不泡的原因是因为它们对其他元素没有意义。 当你在audio元素上触发时间timeupdate
,不pipe是为了audio元素本身还是它的父级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(); }); });