如何获得div或锚点标识的id，单击时，使用纯javascript

Question

我想单击它可以获得<div>或<a>的ID。请帮助...

<div class="reccl" id="allact"><a href="#" class="a" id="b">All Activities</a></div> 
<div class="reccl" id="lgns"><a href="#" class="a" id="bb">Logins</a></div> 
<div class="reccl" id="dwld"><a href="#" class="a" id="bb">Download</a></div> 

javascript代码：

var a = document.getElementsByClassName('a'); 
    for(var b = 0; b <= a.length; b++){ 
     a[i].onclick = function(e){ 
      alert("id clicked"); 
     } 
    } 

代码在这里：http://jsfiddle:%20http://jsfiddle.net/mm07p5rz/

Answer 1

刚刚获得click事件的target对象的id财产。顺便说一句，id s应该在文档中是唯一的。

这将让任何元素的id点击页面上：

document.addEventListener("click", function(evt){ 
 
    console.log(evt.target.id); 
 
});

<div class="reccl" id="allact"><a href="#" class="a" id="b">All Activities</a></div> 
 
<div class="reccl" id="lgns"><a href="#" class="a" id="bb">Logins</a></div> 
 
<div class="reccl" id="dwld"><a href="#" class="a" id="bbb">Download</a></div>

这将让被点击任何<a>元素的id。您可以过滤特定的元素，你喜欢的任何方式，但这一进程，以获得id是一样的：

// Get just and <a> elements 
 
var anchors = document.querySelectorAll("a"); 
 

 
// Set up a click event listener for each one 
 
for(var i = 0; i < anchors.length; i++){ 
 
    anchors[i].addEventListener("click", function(evt){ 
 
    console.log(evt.target.id); 
 
    }); 
 
}

<div class="reccl" id="allact"><a href="#" class="a" id="b">All Activities</a></div> 
 
<div class="reccl" id="lgns"><a href="#" class="a" id="bb">Logins</a></div> 
 
<div class="reccl" id="dwld"><a href="#" class="a" id="bbb">Download</a></div>

Answer 2

我编辑源代码

var a = document.getElementsByClassName('reccl'); 
 
for (var b = 0; b < a.length; b++) { 
 
a[b].onclick = function(e){ 
 
    //get child's id in element 
 
    alert(e.target.id); 
 
    
 
    //get element's id 
 
    alert(e.currentTarget.id); 
 
} 
 
}

<div class="reccl" id="allact"><a href="#" class="a" id="b">All Activities</a></div> 
 
<div class="reccl" id="lgns"><a href="#" class="a" id="bb">Logins</a></div> 
 
<div class="reccl" id="dwld"><a href="#" class="a" id="bb">Download</a></div>