Question

我写了一个绝对定位的下拉菜单。我打开此菜单时会触发自定义事件：

ps.DropDown.prototype._onOpenComplete = function() {
    $(this).trigger('MENU_OPEN', [this]);
}

当我知道ps.DropDown的哪个实例要定位时，这很有效：

var dd = new ps.DropDown();
$(dd).on('MENU_OPEN', fn);

但是，如果事件没有停止传播，我希望我的自定义事件冒泡到window.document。例如：

var dd = new ps.DropDown();
$(dd).on('MENU_OPEN', function(event, instance) {
    // this would stop bubbling to $(window.document)
    // event.stopPropagation();
});
$(window.document).on('MENU_OPEN', function(event, instance) {
    // bubbled!
});

有没有办法用jQuery实现这个目标？

编辑以类比方式添加示例

单击按钮元素将触发事件。此事件将继续冒出父元素链，直到它到达window.document（除非传播被事件侦听器停止）。我有兴趣为自定义事件合成这种行为，如果没有调用event.stopPropagation（），它将冒泡到window.document（或$ .event，或其他一些全局窗口，没关系）

Answer 1

我认为您正在寻找手动调用$ .event.trigger：

$.event.trigger('myCustomEvent', someDataObj, someDomElement, false);

最后一个参数用于“onlyHandlers”标志，在这种情况下为false，因为我们要触发元素处理程序，然后在每个parentNode上再次触发。通过这种方式，您可以将“myCustomEvent”绑定到窗口和发生此事件的节点之间的任何内容。

Answer 2

如果我在没有特定引用的情况下全局需要自定义事件，我会触发页面正文上的事件

$('body').trigger('MENU_OPEN', [this]);

现在，您可以在不知道DropDown的任何信息的情况下随时随地收听该事件

$('body').on('MENU_OPEN',function(event, dropDown){
    // bubbled
});

从未将window.document用作事件目标。

Answer 3

没有必要从DOM元素触发自定义事件：

$(window.document).bind('dropDownHasOpened', function() {
   console.log($(this));
   // 'this' is window.document 
});

ps.DropDown.prototype._onOpenComplete = function() {
  $.event.trigger('dropDownHasOpened');
}

如何将自定义jQuery事件冒泡到window.document？

3 个答案: