当一个元素位于另一个元素内时，jQuery单击事件

当一个元素位于另一个元素内时，jQuery单击事件有问题。我使用的代码类似于以下代码：

<div class="a" id="a">
  <a class="b" id="b"></a>
</div>

$(".a,.b").click(function() {
  var current_id = $(this).attr("id"); 
  alert(current_id);
  ...do something...
});  

$（.a，.b”）。单击（函数（）{
var current_id=$（this.attr（“id”）；
警报（当前_id）；
…做点什么。。。
});  

当我单击标记class=“b”时，它返回封装的class=“a”id，而不是class=“b”的id。如何对其进行编码，以便在单击class=“a”或class=“b”时返回正确的对应id值？

您需要使用。这是事件发生的元素：

$(".a").click(function(event) {
  var current_id = event.target.id;
  alert(current_id);
  ...do something...
});  

请注意，这与

$（event.target）.attr（'id'）

相同，但更简洁、更快，而且我已经删除了对

.b

的引用，因为在

.b

上触发的所有事件都将在

.a

上匹配

---

你必须阻止它冒泡

$(".a,.b").click(function() {
  var current_id = $(this).attr("id"); 
  alert(current_id);
  // ...do something...
  return false; // <-- stop propagation
}); 

---

演示：

您也可以创建此类事件

$(document).on('click','#a>.b',function(){
   var current_id = $(this).attr("id"); 
   alert(current_id);
});

---

您最好在问题中使用

event.stopPropagation（）

@FelixKling，因为他没有使用事件参数。我只是给出了一个改动最少的工作示例。不过，您肯定是正确的。'return false；'工作。多谢各位@FelixKling event.stopPropagation（）如何工作？@Kevin:看看这个答案中的第二个例子。。。不同之处在于

return false

还阻止了浏览器的默认操作，而这并不一定是需要的

stopPropagation

也更具表现力。@ManseUK这没有做任何事情，因为您没有添加

事件

作为参数。但是是的，@FloydThreepwood，它会触发两次，虽然这是否是正确的解决方案将取决于实际情况。@ManseUK是的，但这是一个不必要的改变，除非必要，否则是一个糟糕的改变。我的改变可能是抽象案例最好的解决方案。

$(document).on('click','#a>.b',function(){
   var current_id = $(this).attr("id"); 
   alert(current_id);
});