0

我正在尝试在 和 上绑定具有相同名称的自定义$(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

一切看起来都很好，但是一旦触发了 window 事件，整个事情就进入了一个疯狂的自调用循环，直到浏览器崩溃。

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

这是我的代码：

$('#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');
4

2 回答 2

3

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

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

$('#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');
于 2013-04-04T17:29:23.207 回答
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');
于 2013-04-04T17:30:04.253 回答