Question

如何在复选框上收听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/

有什么想法吗？谢谢！

Answer 1

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

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

<强> Updated Fiddle

Answer 2

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

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

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

Answer 3

使用普通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事件重叠，我们希望在尝试获取click状态时不会触发hold事件。这个小助手标志变量stopPropagation可以解决问题。

stopPropagation（）的不同事件

3 个答案: