DOM 事件不会在非 DOM 元素中冒泡

Posted 2023-02-22

【中文标题】DOM 事件不会在非 DOM 元素中冒泡

【英文标题】：DOM event does not bubble in off-DOM element

【发布时间】：2013-10-22 03:23:04

【问题描述】：

我有一个尚未在 DOM 中的 DOM 元素，我想触发一个 DOM 事件。

事件没有冒泡。但是对于 jQuery，它确实如此。这对我来说似乎很奇怪。

这种行为在 Safari 和 Chrome 中可以重现（在 Firefox 中它可以正常工作 - 事件冒泡）：

var log = function(event) console.log('Clicked on div', event);;

// Create DOM element.
var div = document.createElement('div');
// Don't append it to DOM. Though it works if we append it there.
// document.body.appendChild(div);
div.innerhtml = '<a id="outer"><span class="inner">yo</span></a>';

// Does not work.
div.addEventListener('click', log);
div.querySelector('#outer').click();

// Works!?
$(div).on('click', log);
$(div).find('#outer').click();

jQuery 是否实现了自定义事件冒泡策略？是浏览器出错了吗？

编辑：创建a bug

【问题讨论】：

在 Firefox 中为我工作：jsfiddle.net/DLmha

正如我在帖子中提到的，在Firefox中很酷。

嘿，是的，对不起。错过了。

我认为你是对的。因为 jQuery 从不将您直接提供给它的处理程序绑定到元素，所以在手动执行此操作时，它不需要依赖任何本地触发事件的方法。所以它只会从目标开始，查看是否通过 jQuery 为它提供了事件处理程序，如果是，则触发它，然后继续到 .parentNode 并重复直到 window 或直到某些东西停止传播。

那么，问题是——是浏览器出错了吗？我应该将它作为一个错误提交，因为 Firefox 确实有效吗？

【参考方案1】：

我认为这与它有关

$(div).find('#outer').click();

请注意，如果你去

$("#outer").click();

它也不起作用。所以我敢打赌，JQ 也会触发 div 元素的点击，而不是让 DOM 冒泡。

【讨论】：

当 div 不在 DOM 中时，你如何使用 $('#outer')...？

你能从 $('#outer') 中得到什么吗？