JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<p>Some text</p>
<ul>
    <li>List element one</li>
    <li class="someClass anotherClass">List element two</li>
</ul>

<span>more text</span>
<a href="#">Some link text</a>
<a href="#"><img src="http://davidrhysthomas.co.uk/img/dexter.png" /></a>

JavaScript

function clickOrigin(e){
    var target = e.target;
    var tag = [];
    tag.tagType = target.tagName.toLowerCase();
    tag.tagClass = target.className.split(' ');
    tag.id = target.id;
    tag.parent = target.parentNode.tagName.toLowerCase();
    
    return tag;
}

var tagsToIdentify = ['img','a'];

document.body.onclick = function(e){
    elem = clickOrigin(e);
    
    for (i=0;i<tagsToIdentify.length;i++){
        if (elem.tagType == tagsToIdentify[i] && elem.parent == 'a'){
            console.log('You\'ve clicked a monitored tag (' + elem.tagType + ', in this case and one inside an "a" element, no less!).');
            return false; // or do something else.
        }
        else if (elem.tagType == tagsToIdentify[i]){
            console.log('You\'ve clicked a monitored tag (' + elem.tagType + ', in this case).');
            return false; // or do something else.
        }
    }
};