显然是媒体事件(那些特别属于audio or video like play
, pause
, timeupdate
等)不要起泡。你可以在答案中找到对此的解释这个问题 https://stackoverflow.com/questions/11291651/why-dont-audio-and-video-events-bubble.
因此,使用他们的解决方案,我捕获了timeupdate
event,
$.createEventCapturing(['timeupdate']);
$('body').on('timeupdate', '.audioPlayerJS audio', updateTime); // now this would work.
JSFiddle 演示 https://jsfiddle.net/Lda9j18f/6/
事件捕获的代码(取自其他SO答案):
$.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);
}
});
});
};
})();