Question

我的代码：

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

因此，每次单击div时，都应抛出一个clicked元素的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

为避免该事件也为父元素触发，请添加对stopPropagation的调用：

$('div').on('click',function(e) {  // <-- argument
    checkEl = $(this).attr('id');
    console.log(checkEl);
    e.stopPropagation(); // <---
});

Answer 2

您的问题是所有嵌套的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

Answer 3

您需要缓解event propagation。基本上，由于DIV是嵌套的，因此click事件在最内层的div上调用，并通过父元素一直传播到DOCUMENT。

在点击事件处理程序中调用event.stopPropagation()可以防止这种情况。

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

Answer 4

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

如何找到点击元素的ID

4 个答案: