1

如何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/

有任何想法吗？谢谢！

4

3 回答 3

2

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

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

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

于 2014-05-20T02:36:56.377 回答
1

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

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

更新小提琴

于 2014-05-20T02:34:44.250 回答
0

使用纯 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可以解决问题。

于 2017-12-12T08:58:17.700 回答