时间戳

首页 > 解决方案 > 当父级上存在点击事件时忽略子级 href

javascript - 当父级上存在点击事件时忽略子级 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>

标签： javascripthtml

解决方案

Try this:

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();
}

If that doesn't work then set the child element's disabled property to "true" or "on", I forget which one.

But that way you can dynamically set it's disabled property with JavaScript.

推荐阅读