If I’m reading your question correctly, you want to perform an action to certain elements so long as they aren’t nested in elements with inherent on click functions?
If that’s the case, you could recursively check all the tag types
function handleClick(e) {
const target = e.target;
function recursive(node) {
if (node.id === "stop") return true;
if (["A", "BUTTON"].indexOf(node.tagName) > -1) return false;
return recursive(node.parentNode)
}
console.log(recursive(target));
}body {
width: 100%;
height: 100%;
background: lightgray;
display: flex;
flex-direction: column;
}
div,
a {
padding: 10px;
box-sizing: border-box;
display: flex;
flex-direction: column;
width: 100%;
height: 100px;
background: gray;
}
a {
background: darkgray;
}
p {
width: 100%;
background: white;
}
button {
width: 80px;
}<body id="stop" onclick="handleClick(event)">
body
<a>
anchor
<button>buttonA</button>
<p>textA</p>
</a>
<div>
div
<button>buttonB</button>
<p>textB</p>
</div>
</body>textB should return true since its in a div, while textA should return false since its in an anchor.