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

发布时间：2020-12-14 21:26:12 所属栏目：资源来源：网络整理

导读：我有一个div容器，其中包含html复选框及其标签。使用jquery我想在有人点击此容器中的标签时触发点击事件。当我点击标签时，我看到jquery click事件触发了两次！出于测试目的，我在复选框上触发了click事件而不是标签并且此处复选框单击事件触发器仅应该

我有一个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');
    });

});

解决方法

$(‘#test checkbox’)之一永远不会被调用，因为你没有带名字的标签复选框。

并且，如果您单击复选框或标签，$(‘#test label’)的回调将被调用一次或两次冒泡，因为input元素是标签的一部分并且是一个联合，因此也接收了事件如果标签是点击(它不是冒泡，你不能做event.stopPropagation())。

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

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

点击标签：

LABEL
INPUT

点击输入：

INPUT

编辑
如果您只想处理标签上的点击而不是复选框 – 而且您无法更改HTML结构 – 您可以忽略输入元素的事件。

这样：

$('#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');
    }
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!