I am currently working on implementing an event listener that filters out specific clicks within a container.
For instance, in the code snippet below I am filtering out clicks on elements with the class UL.head.
<div>
<ul class="head">
<li data-test="...">1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="head">
<li>1</li>
<li>2</li>
<li data-test="...">3</li>
</ul>
<ul class="head">
<li>1</li>
<li data-test="...">2</li>
<li>3</li>
</ul>
</div>
document.querySelector('div').addEventListener('click', function(e) {
var ul = findParentByClass(e.target, ".head");
if(ul) { // clicked a UL }
});
function findParentByClass(node, cls) {
while (node && !hasClass(node, cls)) {
node = node.parentNode;
}
return node;
}
I want to create a new function similar to findParentByClass, but this time it would be called findParentByQuerySelector. This way, I could potentially use it like so:
li = findParentByQuerySelector('li:[data-test]');
if(li) { // clicked li with data-test attribute }
However, I am struggling to figure out how to incorporate a querySelector into this event bubbling logic.