如何在文档中查找点击元素的ID

Question

这是我的HTML，我想查找点击元素的id为id3。然而代码循环通过父div在第一次迭代中也返回id = d3，在第三次迭代中id =“id1”。有没有办法阻止ID的第一个结果后，迭代=“ID3

<div id="d1"> 
    <div id="id2"> 
     <div id="id3">Click me</div> 
    </div> 
</div> 

var ij=1 
$(document).on('click','div', function(e){ 
    var currentID = this.id; 
    console.log("ij="+ij+" You clicked the element ="+currentID); 
    ij+=1 
}); 

Answer 1

你需要event.stopPropagation()

冒泡DOM树，阻止任何父处理程序被通知的阻止事件该事件。

var ij = 1 
 
$(document).on('click', 'div', function(e) { 
 
    e.stopPropagation(); 
 
    var currentID = this.id; 
 
    console.log("ij=" + ij + " You clicked the element =" + currentID); 
 
    ij += 1 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="d1"> 
 
    <div id="id2"> 
 
    <div id="id3">Click me</div> 
 
    </div> 
 
</div>

Answer 2

你要做return false;或e.stopPropagation();在功能结束，并使用var currentID = $(this).attr('id');用于获取ID

var ij=1 
 
$(document).on('click','div', function(e){ 
 
    e.stopPropagation(); 
 
    var currentID = $(this).attr('id'); 
 
    console.log("ij="+ij+" You clicked the element ="+currentID); 
 
    ij+=1; 
 
    return false; 
 
});

div{ 
 
padding:20px; 
 
} 
 

 
#d1{ 
 
background-color: red; 
 
} 
 

 
#id2{ 
 
background-color: blue; 
 
} 
 

 
#id3{ 
 
background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div id="d1"> 
 
    <div id="id2"> 
 
     <div id="id3">Click me</div> 
 
    </div> 
 
</div>