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树，防止任何父处理程序收到事件通知。

./gradlew B:build

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
});

Answer 2

您必须在功能结束时执行return false;或e.stopPropagation();，并使用var currentID = $(this).attr('id');获取提取ID

＆＃13;

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;
});

＆＃13;

div{
padding:20px;
}

#d1{
background-color: red;
}

#id2{
background-color: blue;
}

#id3{
background-color: green;
}

＆＃13;

<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>

＆＃13;

如何在文档中查找单击元素的id

2 个答案: