Question

为了演示我的问题，这是我的HTML版本：

<body>
  <a href="google.com">
    <div>
      <h2>Hello</h2>
      <h4>Venus</h4>
    </div>
  </a>
</body>

然后我在Javascript中使用'onclick'作为正文：

document.body.onclick = function(event) {
  console.log(event.path)
}

当我点击'h2'标签时，控制台将仅记录[window，html，body，a]而不记录'a'标签内的元素。

我想要的结果是当我点击'h2'标签时，event.path将返回一个[window，html，body，a，div，h2]数组

“p”标记也存在此问题。

'event.path'是否有办法在'a'标签内包含元素？非常感谢你。

Answer 1

也许这会对你有所帮助

＆＃13;

function handleClicks(e) {
    var path = [];
    var node = e.target;

    while(node != document) {
       !e.target.contains(node.parentNode) && path.push(node.nodeName); // if you want to exclude the elements inside the clicked element
       node =  node.parentNode;
    }
    console.log(path);
}

document.body.addEventListener('click', handleClicks);

＆＃13;

<body>
  <a href="#" id="not">
    <div>
      <h2>Hello</h2>
      <h4>Venus</h4>
    </div>
  </a>
</body>

＆＃13;

被修改

Answer 2

请避免使用＆＃34; div＆＃34;在锚标记内，您可以使用＆＃34; span＆＃34;使用一些已定义的用户类。

如何使event.path识别锚标记内的元素？

2 个答案: