Question

我有以下听众：

$('td').on('click', '.time_note', function (e) { // When the user clicks the note div
    alert('note click');
});

$('table').on('click', 'td', function(e) {
    alert('time click');
});

我需要两个不同的操作，具体取决于是否单击了注释或单击了整个单元格。但是，如果单击了音符，我尝试这样做 - 单元格也是如此。随后两个行动都被解雇了。有一个完美的感觉。

但是，我不希望这种情况发生。如果单击该注释，则不应触发整个单元格的操作，反之亦然。有什么办法可以做到这一点？我尝试使用.off，但这不起作用。

Answer 1

~~你不能......~~

除非两个事件都是委托事件，否则无法停止传播。

由于.live（）方法在事件传播到文档顶部后处理事件，因此无法停止实时事件的传播。同样，.delegate（）处理的事件将传播到它们被委派给的元素;在DOM树中它下面的任何元素上绑定的事件处理程序将在调用委托事件处理程序时执行。因此，这些处理程序可以通过调用event.stopPropagation（）或返回false来阻止委托处理程序触发。

docs

注意： on就像delegate一样。我猜他们只是没有更新文档...

<强>更新

如果两个事件都是委托事件，它可以工作：@josef DEMO。
如果其他事件不是委托人，则无效：DEMO

代表和直接活动之间有什么区别：

事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码调用.on（）时的页面上。要确保元素存在且可以选择，请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定。如果将新HTML注入页面，请在将新HTML放入页面后选择元素并附加事件处理程序。或者，使用委托事件来附加事件处理程序，如下所述。

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序的需要。例如，此元素可以是模型 - 视图 - 控制器设计中视图的容器元素，如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。在加载任何其他HTML之前，文档元素在文档的头部可用，因此可以安全地将事件附加到那里而无需等待文档准备就绪。

Answer 2

尝试检查event.currentTarget：

$('table').on('click', 'td', function(e) {
    if(e.currentTarget.tagName.toLowerCase() == 'td') {
        alert('time click');
    } else {
        alert('note click');
    }
});

您可以找到更多信息here

Answer 3

DEMO

就是这种情况：.note的处理程序在td上。点击.note，事件会冒泡到td，它会触发处理程序。 但你并没有就此止步。事件冒泡到根，单击子元素与单击它的祖先是同义词。这就是为什么它点击td处理程序在table中的原因。

早期，你应该阻止它。

$(function() {

    $('td').on('click', '.note', function(e) {
        alert('note click');
        return false; //prevent bubbling to the second handler
    });

    $('table').on('click', 'td', function(e) {
        alert('td click');
    });

});

由于嵌套元素，单击侦听器两次触发

3 个答案: