Solution 1 :

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 =;

  function recursive(node) {
    if ( === "stop") return true;
    if (["A", "BUTTON"].indexOf(node.tagName) > -1) return false;

    return recursive(node.parentNode)

body {
  width: 100%;
  height: 100%;
  background: lightgray;
  display: flex;
  flex-direction: column;

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)">

textB should return true since its in a div, while textA should return false since its in an anchor.

Problem :

Building a website that will contain others’ work. I want to know if my background receives a click, did they click on something like a button or something with a click handler. I know how to stop events from propagating but I do not want to require that in their code. How would you advise I handle the problem to see if they click something inside the doc but want to know if they clicked on an element inside something interactive that already did something in response to the click?


Comment posted by Scott Marcus

All you can do is check

Comment posted by charlietfl

But also note that the target may be nested in something you do not want to block such as an

Comment posted by Jason Hocker

If they click on p, I want to then perform my action in the onclick associated with the outer div. if they click on a button or the text as a child in the button then I want the outer onclick to ignore that event. My idea is to check currentTarget and go through the parents looking for a button. I don’t want to just compare currentTarget and Target. If that works, that is only button. I would also want to ignore inputs and even div with onclick added. Not sure how to look for div that responds to clicks.

Comment posted by Jason Hocker

If the click is on or a child I do not care about that difference. I will assume it’s all related to the goal to fire the link and my outer disc’s onclick listener will want to know that the click is related to an action of opening a link.

Comment posted by minimal reproducible example

Would really be a lot easier to help if you provide examples as per