Question

将事件侦听器附加到孙子时遇到了一些问题。

父级点击和子级点击都能正常工作，只有孙级点击不会触发。

这是我当前的代码：

/* Parent */
$('body').on('click', 'div.left-menu-item', function (e) {
    e.preventDefault();

    console.log('parent'); // <-- this works
});

/* Child */
$('body').on('click', 'div.left-menu-item div.dropdown', function(e){
    e.stopPropagation();
    e.stopImmediatePropagation();

    console.log('child'); // <-- this works
});

/* Grandchild */
$('body').on('click', 'div.left-menu-item div.dropdown-menu.show a.edit', function(e){
    e.stopPropagation();
    e.stopImmediatePropagation();

    console.log('grandchild'); // <-- this does NOT work
});

按钮的标记是问题所在

<a class="btn edit" data-unsp-sanitized="clean">
    <i class="fas fa-fw fa-pen"></i> <span>Edit</span>
</a>

我还尝试将孙子事件监听器设置为：

$('body').on('click', 'a.edit', function(e){
    console.log('grandchild'); <-- this doesnt work either
});

新更新。

我添加了带有通配符的点击侦听器，以便可以监听所有点击：

$('body').on('click', '*', function(e){
    console.log('clicked');
});

总共触发了20次点击，但是当我点击.edit时，仍然没有检测到点击。

如果我触发手动点击，$('.edit').trigger('click');会起作用。

Answer 1

问题解决了。

在$(document).ready内部，我创建了一个名为document的实际对象（愚蠢，对吗？），这使一切变得疯狂。

所以我刚刚将var document = ....;重命名为var documentObj = ....;，一切正常。

对于某些事件监听器为何起作用，我仍然有些困惑。我了解到应该不应该执行覆盖文档，而覆盖文档可能导致$('body').on('...', '...无法按预期运行，因为正文是文档的子元素？但这并不能解释为什么这么多事件监听器起作用，而只有一个没有触发点击事件。

Answer 2

您还可以通过将侦听器仅附加到父级，并检查谁发出了事件（通过类或节点名称/类型）来说明事件冒泡的优点。

$('div.left-menu-item').on('click', function(e){

  if( $(e.target).hasClass('dropdown') ) {
    // child logic
  } else if ( $(e.target).hasClass('edit') ) {
    // grandchild logic
  }
});

事件侦听器三个级别（从父级到孙级）

2 个答案: