单击html标签时,Jquery单击事件触发两次

Question

我有一个div容器,其中包含html复选框及其标签.使用jquery我想在有人点击此容器中的标签时触发点击事件.

当我点击标签时,我看到jquery click事件触发了两次!

出于测试目的,我触发了复选框上的click事件而不是标签,此处复选框单击事件触发器只应该一次.

这是小提琴. http://jsfiddle.net/AnNvJ/2/

<tr>
    <td>
        <div id="test">
            <label>
                <input type="checkbox" id="1" />demo1</label>
            <label>
                <input type="checkbox" id="2" />demo2</label>
            <label>
                <input type="checkbox" id="3" />demo3</label>
        </div>
    </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>

JQUERY

$(document).ready(function () {

    $('#test label').live('click', function (event) {
        alert('clicked');
    });


    $('#test checkbox').live('click', function (event) {
        alert('clicked');
    });

});

Answer 1

$('#test checkbox')永远不会调用其中一个,因为您没有带名称的标记checkbox.

并且,如果您单击复选框或标签,则回调for $('#test label')被调用一次或两次导致冒泡,因为输入元素是标签的一部分并且是一个联合,因此如果标签是单击的话也会收到事件(它是不起泡,你做不到event.stopPropagation()).

如果您以这种方式更改代码,则可以检查此项:

 $('#test label').live('click', function (event) {
        event.stopPropagation(); //<-- has no effect to the described behavior
        console.log(event.target.tagName);
 });

点击标签:

标签
输入

点击输入:

INPUT

编辑 如果您只想处理单击label而不是复选框 - 而且您无法更改HTML结构 - 您可以忽略input元素的事件.

这样:

$('#test label').live('click', function (event) {
    if( event.target.tagName === "LABEL" ) {
         alert('clicked');
    }
});

或使用jQuery测试:

$('#test label').live('click', function (event) {
    if( $(event.target).is("label") ) {
         alert('clicked');
    }
});

Answer 2

这是因为你把输入放在标签内,所以当你点击复选框时你也点击每个父母(称为冒泡) EDIT,归功于@ t.niese:事实上这里没有冒泡,因为问题是当你点击标签时它只会起泡.

要防止双击事件,还要选中复选框,您可以使用:

$(document).ready(function () {

    $('#test label').on('click', function (event) {
        event.preventDefault();
        var $check = $(':checkbox', this);
        $check.prop('checked', !$check.prop('checked'));
        alert('clicked label');
    });


    $('#test :checkbox').on('click', function (event) {
        event.stopPropagation();
        alert('clicked checkbox');
    });
});

小提琴

也更喜欢使用$.on和注意:checkbox选择器的使用或[type="checkbox"]根据JQuery API更快和更兼容(属性选择器)

event.preventDefault()将停止浏览器为本机标记处理的每个操作,以 event.stopPropagation()防止冒泡和任何父处理程序被通知该事件