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() div和inner1运行wrapper。

随着网站的建立，嵌套的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);
});

嵌套div上的jQuery click（）

5 个答案: