javascript - 如果嵌套两个元素，如何将 onclick 事件传递到最深的元素？

Question

我有以下 HTML:

<div class='parent'>
    <div class='child'>
        <div class='child-of-child'>
        </div>
    </div>
</div>

然后，我执行以下 javascript，将监听器添加到我的 div 中:

var addOnClickListenerToSelfAndChildren = function(el) {
    el.onclick = onclickfunction;
    var children = el.children;
    for (var i = children.length - 1; i >= 0; i--) {
        addOnClickListenerToSelfAndChildren(children[i]);
    }
}

var parent = document.getElementsByClassName('parent')[0];
addOnClickListenerToSelfAndChildren(parent);

这非常有效，只是我希望只有最深的节点才能注册点击。这意味着如果child-of-child接收到点击事件，那么“child”和“parent”将忽略它。如何实现这一目标？

这里有一张小图来澄清事情:

如果 child 收到onclick，我不想触发 parent 的onclick。但是，如果我在 parent 区域中单击，则该单击必须由“parent”注册。我想你可能会说我希望 children “点击不透明”。

Answer 1

我觉得你只需要注册点击父级即可。

var parent = document.getElementsByClassName('parent');
parent[0].onclick=function(e){
  //'e.target' gets the origin of the event. 'this' gets the parent object
  console.log(e.target);
}

使用e.target，您可以获取点击的来源，并可以根据该结果执行逻辑。您还可以使用 this 获取父对象