嵌套div上的jQuery click（）

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时，它会运行带有inner1 div和wrapper的do_something() 。

随着网站的建立，嵌套的div将会发生很多。 有没有动态的方法来解决这个问题，只运行顶级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);
});