javascript - jQuery:无法在窗口和元素上正确绑定(bind)同名的自定义事件

Question

我正在尝试在 $(window) 和 $('#slider') 上绑定(bind)具有相同名称的自定义事件。然后我想让窗口事件触发元素事件。

因此，工作流程将是:

1. Bind element event to say `Hello world` f.e.
2. Bind window event to trigger element event
3. Trigger window event

结果:

1. Window event is triggered
2. Element event is triggered

一切看起来都不错，但是一旦触发了窗口事件，整个事情就会陷入疯狂的自调用循环，直到浏览器崩溃。

看起来好像元素事件触发了窗口上的事件。

这是我的代码:

$('#slider').bind('asd', function() {
    console.log('asd called on slider');
});
$(window).bind('asd', function() {
    console.log('asd called on window');
    $('#slider').trigger('asd');
}).trigger('asd');

Answer 1

事件泡沫。在窗口的子窗口上触发事件将导致事件最终到达窗口，除非您停止传播。

解决此问题的一种方法是仅触发处理程序，而不是事件。

$('#slider').bind('asd', function() {
    console.log('asd called on slider');
});
$(window).bind('asd', function() {
    console.log('asd called on window');
    $('#slider').triggerHandler('asd');
}).trigger('asd');

还有另一种方法:

$('#slider').bind('asd', function(e) {
    e.stopPropagation();
    console.log('asd called on slider');
});
$(window).bind('asd', function() {
    console.log('asd called on window');
    $('#slider').trigger('asd');
}).trigger('asd');