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

我有以下听众：

$('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

，但没有成功。

您不能

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

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

注意：

on

与本例中的

委托类似。我猜他们只是没有更新文档


更新：


如果两个事件都是委托事件，则它可以工作：@josef
如果其他事件不是委托的，则它将不起作用：

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

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

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

你不能

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

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


注意：
on
与本例中的
委托类似。我猜他们只是没有更新文档


更新：


如果两个事件都是委托事件，则它可以工作：@josef
如果其他事件不是委托的，则它将不起作用：

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

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

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

尝试检查event.currentTarget：

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

您可以找到更多信息
尝试检查event.currentTarget：

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

您可以找到更多信息

情况是这样的：
。注意
的处理程序位于
td
上。单击
。注意
，事件将弹出到
td
，在那里为其触发处理程序。但你并没有就此止步。事件冒泡到根，单击子元素与单击它的祖先是同义的。这就是为什么它像单击
td
一样，其处理程序位于
表中

在早期，你应该预防它

$(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');
    });

});​


情况是这样的：
。注意
的处理程序位于
td
上。单击
。注意
，事件将弹出到
td
，在那里为其触发处理程序。但你并没有就此止步。事件冒泡到根，单击子元素是synon