如何仅在父元素上执行回调，即使事件是由其子元素触发的？

Question

我正在开发一个聊天应用程序。每个聊天元素都有自己的子元素。所有聊天都在 chatContainer.

内

现在，如果我将事件侦听器添加到 chatContainer，我如何仅在父元素（聊天）上执行回调，即使该事件是由其子元素之一触发的（chatChild)?

Answer 1

您可以使用 closest 从目标（触发事件的元素）获取父元素。

让我们假设您的聊天元素有一个 chat class。代码应该是这样的

chatContainer.addEventListener('the_event_of_your_choise', event => {
    chat = event.target.closest('.chat');
    // …

});