jquery - 如何找到被点击元素的id

Question

这个问题已经有答案了:

Child element click event trigger the parent click event (5 个回答)

已关闭 4 年前。

我的代码:

$('div').on('click',function(){
    checkEl = $(this).attr('id');
    console.log(checkEl);
});

因此，每次单击 div 时，它都会抛出被单击元素的 id...

但是..在console.log上我得到了3/4/5/6个元素取决于我点击的位置...

我的输出是预期 div 的 id，但也显示了父 div...

如何获取精确点击的元素的id？

$(function(){
$('div').on('click',function(){
    checkEl = $(this).attr('id');
    console.log(checkEl);
    })
    })

#main{
position:relative;
width:300px;
background-color:red;
}
div{
position:relative;
border:1px solid gray;
padding:15px;
width:100%:
}
#one{
background-color:black;
}
#two{
background-color:blue;
}#three{
background-color:orange;
}#four{
background-color:yellow;
}#fifth{
background-color:purple;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
<div id="one">
<div id="three">
<div id="four">
<div id="fifth">
</div>
</div>
</div>
</div>
</div>

Answer 1

您的问题是所有嵌套的 div 都有 onclick 处理程序，因此它们都会触发。如果你只想要最里面的，你可以使用下面的。

$('div').on('click',function(ev){
    ev.stopPropagation()
    checkEl = $(this).attr('id');
    console.log(checkEl);
});

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation