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

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>

我也尝试过设置孙子eventlistener：

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