javascript - DOM 查找 ID 返回未定义

Question

每当我单击正文元素时，都会收到未定义的错误。不知道问题出在哪里..

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

Answer 1

在 jQuery 事件回调中，this 上下文始终等于您分配事件的对象。对于 $('body').on('click' 回调 this 将始终是 body DOM 元素，无论用户在何处单击。

如果你想获取点击次数最多的元素，你需要访问事件的 target 属性:

$('body').on('click', function(e)
{
    console.log(e.target.id); // it is "" if no id presented
}); 

查看此片段:

$('body').on('click', function(e)
{ 
  $("#result").text(e.target.id === "" ? "No ID" : e.target.id);
}); 

div {
  display: inline-block;
  width: 50px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="background-color: red;" id="red"></div>
<div style="background-color: green;" id="green"></div>
<div style="background-color: blue;" id="blue"></div>
<div style="background-color: black;" id="black"></div>
<div style="background-color: yellow;"></div>

<br/><span id="result"></span>