当父级上存在点击事件时忽略子级 href

如何解决当父级上存在点击事件时忽略子级 href

我希望能够在以下代码段中将事件处理程序附加到父元素，以阻止子元素的 href 或点击处理程序触发。我想避免找到所有的孩子，因为他们可能有不同的点击处理程序。这可能吗？如何实现？

const parent = document.querySelector('.parent')
parent.onclick = e => {
  console.log('parent clicked')
  e.preventDefault()
  e.stopPropagation()
}

const child = document.querySelector('a')
child.onclick = () => console.log('child clicked')

.parent {
  margin: 10px;
  padding: 20px;
  width: fit-content;
  border: 3px solid black;
}

<div class="parent">
  <a href="stackoverflow.com"/>Hello there</a>
<div>

解决方法

试试这个：

let parentClicked = false;

const parent = document.querySelector('.parent')
parent.onclick = e => {
  parentClicked = true;
  console.log('parent clicked')
  e.preventDefault()
  e.stopPropagation()
}

const child = document.querySelector('a')
child.onclick = (e) => {
  if (parentClicked) e.preventDefault();
}

如果这不起作用，那么将子元素的禁用属性设置为 "true" 或 "on"，我忘记了哪个。

但是这样你就可以用 JavaScript 动态设置它的禁用属性。