Question

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

因此，工作流程将是：

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');

Answer 2

使用event.stopPropagation（）来停止DOM冒泡：

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

jQuery：无法在窗口和元素上正确绑定具有相同名称的自定义事件

2 个答案: