不同事件的 stopPropagation()答案

【问题标题】：stopPropagation() of a different event不同事件的 stopPropagation()
【发布时间】：2014-05-20 02:32:33
【问题描述】：

如何在复选框上监听 change 事件而不触发其容器上的 click 事件？

<label><input type="checkbox"> Hello world</label>

我想对复选框的change 事件触发一个操作，但我不希望它冒泡到标签上的click 事件。

(function ($) {
    $('input').change(function (v) {
        v.stopPropagation();
    });

    $('label').click(function () {
        alert('You should not see this message if you click the checkbox itself!');
    });
})(jQuery);

http://jsfiddle.net/r49PA/

有什么想法吗？谢谢！

【问题讨论】：

将click 事件绑定到停止传播的input。

标签： javascript jquery events stoppropagation event-propagation

【解决方案1】：

问题是当您单击复选框时会触发两个事件——change 和click。你只是捕捉到change，所以点击不会被告知停止传播。您需要在单击事件的复选框上添加第二个处理程序，或者组合一个处理程序来捕获这两种类型，如下所示：

$('input').on('change, click', function (v) {
    v.stopPropagation();
});

这是一个演示组合处理程序的 jsFiddle：http://jsfiddle.net/r49PA/4/

【讨论】：

【解决方案2】：

您可以在 click 事件而不是 change 事件上停止传播，因为您为父 label 绑定了 click 事件：

$('input').click(function (v) {
    v.stopPropagation();
});

Updated Fiddle

【讨论】：

【解决方案3】：

使用 plain javascript，您可以执行以下操作：

var stopPropagation = false;    

selector.addEventListener('mousedown', function(event) { 
  // simulating hold event
  setTimeout(function() {
    stopPropagation = true;

    // do whatever you want on the `hold` event

  })
}

selector.addEventListener('click', function(event) { 
  if (stopPropagation) { event.stopPropagation(); return false; }

  // regular event code continues here...

}

由于mousedown 和click 事件重叠，我们希望在尝试获取hold 状态时不触发click 事件。这个小助手标志变量stopPropagation 可以解决问题。

【讨论】：