Detect clickable elements on page

by igalst

HTML

<div id="root">
  <button onclick="console.log('btn clicked')">
    btn
  </button>
  <p>
    <a href="http://google.com" target="_blank">link</a>  
  </p>
  <ul>
    <li>
      <div id="a">"a" js click </div>
    </li>
    <li>
      <div>
        <div id="b">
          "b" js click
          <img src="https://hi.auto/wp-content/uploads/2019/10/logo.png" alt="i'm also clickable"/>
        </div>
      </div>
    </li>
  </ul>
</div>

CSS

li div[id] {
  cursor: pointer;
}

JavaScript

['a', 'b'].map(id => document.getElementById(id).addEventListener('click', () => console.log(`#${id} clicked`)));

const getClickable = (parent = document.body) => {
  const treeWalker = document.createTreeWalker(parent, NodeFilter.SHOW_ELEMENT, {
    acceptNode: node => true
  }, false);

  const nodes = [];
  while (treeWalker.nextNode()) {
    const node = treeWalker.currentNode;
    const isClickableType = ['A', 'BUTTON'].includes(node.tagName);
    const isPointer = getComputedStyle(node).cursor === 'pointer';
    (isClickableType || isPointer) && nodes.push(node);
  }

  return nodes.filter(node => !nodes.some(parentNode => parentNode !== node && parentNode.contains(node)));
};

console.log(getClickable());