1

如果定义了更具体的事件之一，如何防止先前定义的事件发生？

这是一个编辑过的小提琴

    <div class="first">
    <div class="wrapper">
        <span class="click">click</span>
        <div class="second">
            <div class="wrapper"> 
                <span class="click">click</span>
            </div>
        </div>
    </div>
</div>

  $('.first .click').on('click', function(e) {
    e.stopPropagation();
    alert('first');
});

$('.second > .click').on('click', function(e) {
    e.stopPropagation();
    alert('second');
});

我希望嵌套在第一个 div 中的第二个 span.click 不会触发附加到第一个 div 的事件。

编辑：（为反对票欢呼）

下面的几个答案非常适合使用直接父 > 子选择器的上述标记。但不幸的是，我简化了示例中的标记，这可能具有误导性。

在我的生产代码中，单击/按钮是在两个部分中都使用的共享模板的一部分，因此本示例中的“父”选择器 .second 是按钮上 DOM 上的几个节点。

我会尝试添加一个更相关的小提琴。

4

2 回答 2

3

使用Child Selector jQuery( "parent > child" )，所以你的代码现在应该是

$('.first > .click').on('click', function(e) {
    e.stopPropagation();
    alert('first');
});

$('.second .click').on('click', function(e) {
    e.stopPropagation();
    alert('second');
});

这是小提琴

更新

既然你更新了你的标记，我有一个更新的小提琴

于 2013-06-27T08:23:06.387 回答
3

尝试以这种方式，使用子选择器 >：

$('.first > .click').on('click', function(e) {
    e.stopPropagation();
    alert('first');
});

$('.second > .click').on('click', function(e) {
    e.stopPropagation();
    alert('second');
});
于 2013-06-27T08:19:57.513 回答