JSFiddle - React, Tailwind, and code Playground

by Sergei Marochkin

HTML

<div id="main">
	<div class="animals">
		<div class="animal dog bob">I'm bob!</div>
	</div>
	<div class="birds">
		<div class="animal bird bob">I'm bob!</div>
	</div>
</div>

CSS

div { padding:15px; margin:10px; color:#fff; }

.animals { background:#888; }
.birds { background:#334466; }

.dog { background:#242424; }
.bird { background:#002424; }

JavaScript

Element.prototype.parents = function(selector) {
	var elements = [];
	var elem = this;
	var ishaveselector = selector !== undefined;
	
	while ((elem = elem.parentElement) !== null) {
		if (elem.nodeType !== Node.ELEMENT_NODE) {
			continue;
		}

		if (!ishaveselector || elem.matches(selector)) {
			elements.push(elem);
		}
	}

	return elements;
};

[].forEach.call(document.querySelectorAll('.animal'), function(element) {
	element.addEventListener('mousedown', function() {
        var isBobAnimal = this.parents('.animals').length !== 0;
        if (isBobAnimal) {
            alert('Bob is animal');
        } else {
            alert('Bob is spy!');
        }
	});
});