jquery 选择器特异性和传播

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

编辑:(为反对票欢呼)

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

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

我会尝试添加一个更相关的 fiddle 。

Answer 1

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

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

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