javascript - 不同事件的 stopPropagation()

Question

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

<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

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

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

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