jquery給label綁定click事件被觸發兩次解決方案

首先我們看下面的代碼片段（label包裹checkbox）

 

<div class="example"><label for="chk_6" class="label-1">選項6<input class="chkbox-1" type="checkbox" id="chk_6" value="1"></label></div>
<div class="example"><label for="chk_7" class="label-1">選項7<input class="chkbox-1" type="checkbox" id="chk_7" value="1"></label></div>
<div class="example"><label for="chk_8" class="label-1">選項8<input class="chkbox-1" type="checkbox" id="chk_8" value="1"></label></div>
<div class="example"><label for="chk_9" class="label-1">選項9<input class="chkbox-1" type="checkbox" id="chk_9" value="1"></label></div>
<div class="example"><label for="chk_10" class="label-1">選項10<input class="chkbox-1" type="checkbox" id="chk_10" value="1"></label></div>

 

 

// 綁定label的click事件
    $('.label-1').click(function (e) {
        console.log($(this).text());
    });

 

 

點擊文字，再觀察控制台我們會發現一個現象！！（代碼被執行兩次）

 

 

問題原因：

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

 

 解決方案一（修改html結構label和checkbox同級）：

 

<div class="example"><label for="chk_1" class="label-1">選項1</label><input class="chkbox-1" type="checkbox" id="chk_1" value="1"></div>
<div class="example"><label for="chk_2" class="label-1">選項2</label><input class="chkbox-1" type="checkbox" id="chk_2" value="1"></div>
<div class="example"><label for="chk_3" class="label-1">選項3</label><input class="chkbox-1" type="checkbox" id="chk_3" value="1"></div>
<div class="example"><label for="chk_4" class="label-1">選項4</label><input class="chkbox-1" type="checkbox" id="chk_4" value="1"></div>
<div class="example"><label for="chk_5" class="label-1">選項5</label><input class="chkbox-1" type="checkbox" id="chk_5" value="1"></div>

 

 

 

 刷新界面，點擊文字，再觀察控制台：

 

 

 

 

 OK正常了。

 

 

解決方案二（修改js代碼綁定checkbox的change事件）：

    // 綁定checkbox的change事件
    $('.chkbox-1').change(function (e) {
        console.log($(this).parent().text());
    });

 

 

 刷新界面，點擊文字，再觀察控制台：

 

 

 

 

  OK正常了。

 

解決方案三（判斷事件來源，如果是input，則阻止）：

// 綁定label的click事件
    $('.label-1').click(function (e) {
        if ($(e.target).is("input"))
            return;
        console.log($(this).text());
    });

 

 

 

 

 

解決方案四：

不用label（最簡單直接粗暴的方法）

 

 

 

如果這篇文章對您有幫助，您可以打賞我

 

技術交流QQ群：15129679