label上的事件执行两次

标签（空格分隔）：事件执行两次

今天在做公司项目的过程中，需要在表单元素单选框上绑定事件，执行相应的操作，结果发现事件执行了两次

具体代码：

<div class="radio">

    <label roleid="24">

        <input type="radio" checked="" value="option1" id="optionsRadios0" name="optionsRadios">测试

    </label>

</div>

// javascript

$("[roleid]").click(function (event) {

    console.log(event.target);

    var roleid = $(this).attr("roleid");

    //return false;  //防止事件执行两次

})

控制台打印目标元素：

label上的事件操作执行两次

触发两次的原因是：label和input关联，点击label的时候，事件冒泡一次，同时会触发关联的input的click事件，导致事件再次冒泡

解决方案：

阻止事件冒泡；return false

判断当前点击的目标元素event.target，如果为想要执行操作的元素，则进行操作

秒客网

label上的事件操作执行两次

label上的事件执行两次

相关文章