jQuery的点击（）上嵌套式div

Question

的代码也许可以解释这个比我好的人：

<div class="wrapper"> 
    <div class="inner1"></div> 
    <div class="inner2"></div> 
</div> 

<script> 
$('div').click(function(){ 
    var class_name = $(this).attr('class'); 
    do_something(class_name); 
}); 
</script> 

当我点击inner1 DIV，它运行do_something()与两个inner1 DIV和wrapper。

随着网站的建设，嵌套的div将会发生很多。有没有一种动态的方法来解决这个问题，只运行顶级股利（在这种情况下，inner1）？

Answer 1

使用stopPropagation：

$('div').click(function(e){ 
    e.stopPropagation(); 
    var class_name = $(this).attr('class'); 
    do_something(class_name); 
}); 

---

在另一方面：你确定这是你想要做什么？您可能希望修改选择器（$('div')）以仅将目标定位到您想要的DIV。

Answer 2

您需要防止事件冒泡。使用jQuery，你可以这样做：

$('div').click(function(e) 
{ 
    e.stopPropagation(); 

    // Other Stuff 
}); 

Answer 3

你选择的是'div'，所以每一个单击的div都会运行。这个例子中包括wrapper，inner1和inner2。

如果只想inner1火关闭该功能，你的代码看起来就像这样：

$('.inner1').click(function(){ 
    var class_name = $(this).attr('class'); 
    do_something(class_name); 
}); 

Answer 4

<div class="wrapper"> 
    <div class="inner1"></div> 
    <div class="inner2"></div> 
</div> 

<script> 
$('div').click(function(ev){ 
    var class_name = $(this).attr('class'); 
    do_something(class_name); 
    ev.stopPropagation(); 
}); 
</script> 

Answer 5

的事件冒泡，直到你与stopPropagation方法停止：

$('div').click(function(e){ 
    e.stopPropagation(); 
    var class_name = $(this).attr('class'); 
    do_something(class_name); 
});