解決label點擊事件觸發兩次問題

問題描述：

通常，為了用戶體驗，我們點擊單選框或者復選框后面文字，即可選中當前項。代碼如下：

<label>
       <input type="radio" name="sex" />男
</label>
<label>
       <input type="radio" name="sex" />女
</label>

但是，此時，如果label標簽有點擊事件，則會觸發兩次。

問題原因：

點擊label的時候，事件冒泡一次，同時會觸發關聯的input的click事件，導致事件再次冒泡

解決辦法：

1.判斷事件來源，如果是input，則阻止。代碼如下：

 $("label").click(function (e) {
                if ($(e.target).is("input"))
                    return;
                //code
            });

這個方法同樣適用於解決“點擊頁面空白處隱藏彈窗”問題。

2.從寫法上解決，使用label標簽的for屬性，代碼如下：

<input type="radio" name="sex" id="man" /><label for="man">男</label>
<input type="radio" name="sex" id="women" /><label for="women">女</label>

3.其他解決辦法，傳送門