Question

如果定义了一个更具体的事件，我怎样才能防止先前定义的事件发生？

以下是经过编辑的fiddle

    <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的事件。

编辑:(欢呼投票）

下面的几个答案完全适用于使用直接父级＆gt;的上述标记。儿童选择器。但不幸的是，我已经简化了示例中的标记，这可能会产生误导。

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

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

Answer 1

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

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

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

Answer 2

使用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');
});

以下是Fiddle

<强>更新

由于您更新了标记，因此我更新了fiddle

jquery选择器的特异性和传播

2 个答案: