I’m trying to get my head around Event’s and I’m totally lost? I would like to access an elements id from an event listener, using e.path Array? The id that I want is always in the article id=”someID” node of the objTmp Array().
I also can figure out why this only works in Chrome all other browsers say that objTmp is undefined?
Any help would be appreciated…
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Working </title>
<style type="text/css">
</style>
<script type="text/javascript">
function init() {
var eventTmp = document.querySelectorAll("ul li");
for (var i = 0; i < eventTmp.length; i++) {
eventTmp[i].addEventListener('click', function (e) {
var objTmp = e.path;
for (var i = 0; i < objTmp.length; i++) {
if (objTmp[i].tagName === "ARTICLE") {
//This is where I get lost
//How do I get the id from this node??
var x = objTmp[i];
console.log(x);
}
}
e.stopPropagation();
}, false);
}
}
</script>
</head>
<body onload="init()">
<main id="">
<article id="id_Article0">
<section>
<h2>Header</h2>
<div>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</section>
</article>
<article id="id_Article1">
<section>
<h2>Header</h2>
<div>
<p>
<h3>Some Text</h3>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</p>
</div>
</section>
</article>
</main>
</body>
</html>Advertisement
Answer
Here’s a way to locate the ancestor ARTICLE node without using event.path:
function init() {
var eventTmp = document.querySelectorAll("ul li");
for (var i = 0; i < eventTmp.length; i++) {
eventTmp[i].addEventListener('click', function (e) {
var articleNode = this;
while (articleNode.nodeName != "ARTICLE" && articleNode.nodeName != "BODY") {
articleNode = articleNode.parentNode;
}
if (articleNode.nodeName == "BODY") {
// no article ancestor was found
} else {
// do something with articleNode
console.log(articleNode.id);
}
e.stopPropagation();
}, false);
}
}