如何在文檔中查找點擊元素的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>