Question

我有以下HTML：

＆＃13;

<!DOCTYPE html>
        <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body>
            <div>
                <section>
                    <a>first</a>
                    <a>second</a>
                </section>
            </div>
            <section>
                <a>third</a>
                <a>fourth</a>
            </section>
            <section>
                <div>
                    <a>fifth</a>
                    <a>sixth</a>
                </div>
            </section>
        <script src="ex-2-a.js"></script>
        <!--<script src="ex-2-b.js"></script>-->
        </body>
        </html>

＆＃13;

我希望只为整个文档添加一个事件监听器，而这个监听器只能抓住＆＃39; a＆＃39;标签上有＆＃39; div＆＃39;作为祖先。这意味着，如果我点击第一，第二，第五和第六，我会收到一条消息说＆＃34;很酷＆＃34;。

关于此问题的任何想法，因为那里没有id并且只与...合作标记名？

Answer 1

使用"event delegation"（在DOM树中的一个元素上设置一个事件处理程序，并允许来自树中较低元素的事件冒泡并被捕获），我们可以设置一个事件处理程序body级别，然后我们可以针对符合您条件的元素集合检查冒泡事件的实际来源。

请参阅内联评论了解更多信息：

＆＃13;

// Set the event listener at the <body> and wait for other
// events to bubble up to it.
document.body.addEventListener("click", function(evt){
  // Get an array of all the <a> elements that are descendants of <div> elements
  let matches = Array.prototype.slice.call(document.querySelectorAll("div a"));
  
  // Test to see if array contains the one that was clicked
  if(matches.includes(evt.target)){
    console.log("You clicked an <a> that is a descendant of a <div>!");
  }
});

＆＃13;

<div>
  <section>
    <a>first</a>
    <a>second</a>
  </section>
</div>

<section>
  <a>third</a>
  <a>fourth</a>
</section>

<section>
  <div>
    <a>fifth</a>
    <a>sixth</a>
  </div>
</section>

＆＃13;

Answer 2

感谢@Scott Marcus的帮助。我提交了答案并且有效。我还发现了一种使用.closest（）的新方法。让我知道你的想法

document.addEventListener('click',(e)=>{
let currElm = e.target;
if (currElm.closest('div')) {
  console.log(currElm);
 }
});

如何为嵌套元素添加1个事件侦听器

2 个答案: