label上的事件操做執行兩次

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和input關聯，點擊label的時候，事件冒泡一次，同時會觸發關聯的input的click事件，致使事件再次冒泡

解決方案：

• 阻止事件冒泡；return false
• 判斷當前點擊的目標元素event.target，若是爲想要執行操做的元素，則進行操做