關於label的點擊事件(原創)

通常做網頁時不會用radio和checkbox的原有樣式，通常會進行樣式美化，手機端我用的jqurey weui框架，他的原理是這樣的:

<label class="check_label" for="sort_4">
       <input type="radio" class="weui_check" name="sort" id="sort_4">
       <i class="weui_icon_checked">Price Low to High </i>
</label>
<style>
.check_label{position:relative;}
.weui_check{position:absolute;left:-9999em;}
</style>

將input移出屏幕，樣式加在i標簽上，在電腦端我自己寫代碼的時候出現個問題：

.weui_check{position:absolute;left:9999em;}

時，當input被選中時，屏幕居然詭異的聚焦至這個input，跳出了原頁面；當我改成：

.weui_check{position:absolute;left:-9999em;}

就沒有問題了，沒去深研究，暫時不管；如果有同行碰到這情況，且知道原因，感謝留言告知。

 

主要談談label的點擊事件中遇到的坑，(jq寫的)：

<label class="check_label" for="sort_4">
       <input type="radio" class="weui_check" name="sort" id="sort_4">
       <i class="weui_icon_checked">Price Low to High </i>
</label>

$("label").on("click",function(){
       $(this).next().slideToggle();
       console.log(1);
})

原本想給其后邊的元素添加個toggle事件，就是如果顯示就收起，收起就顯示；這下好，點了后，就展開后馬上收起。。。

什么鬼，不知道代碼出啥問題了，console.log()后發現，被執行了兩次！！

自行猜測：（如果有錯，歡迎高手指正）

點擊label后，點擊事件會trigger（觸發了）label的for的那個input，以上代碼，是正好是其內部的input的click事件（來觸發被選中或未被選中事件），然后input的點擊事件，冒泡至父級label上，所以導致了兩次點擊的情況。

我的解決思路：

1.改變結構，將input從label便簽中取出放在別的地方：

<label class="check_label" for="sort_4">
       <i class="weui_icon_checked">Price Low to High </i>
</label>
<input type="radio" class="weui_check" name="sort" id="sort_4">


 $("label").on("click",function(){console.log(1); })

親測可行，只執行了一次，上述的原因判斷應該是正確的！

1.在不改變原有結構的情況下，因為我label里邊的i標簽實際是充滿label的，所以將點擊事件加在i上（坑來了）：

<label class="check_label" for="sort_4">
       <input type="radio" class="weui_check" name="sort" id="sort_4">
       <i class="weui_icon_checked">Price Low to High </i>
</label>

$("i").on("click",function(){
       $(this).next().slideToggle();
       console.log(1);
})

我去！坑來了，完全沒有用，console中什么都沒輸出，出了什么事？？？

再改：

<label class="check_label" for="sort_4">
       <input type="radio" class="weui_check" name="sort" id="sort_4">
       <i class="weui_icon_checked">Price Low to High </i>
</label>

$("label").children().on("click",function(){
       $(this).next().slideToggle();
       console.log(1);
})

我去！執行了，而且是執行了一次！

什么鬼？噢噢噢...應該是label觸發了input的click事件，所以執行了！

再改：

<label class="check_label" for="sort_4">
       <input type="radio" class="weui_check" name="sort" id="sort_4">
       <i class="weui_icon_checked">Price Low to High </i>
</label>

$("label input").on("click",function(){
       $(this).next().slideToggle();
       console.log(1);
})

成功執行！上述判斷是正確的！

 

我那個去，那問題來了，放在label便簽中的所有的元素，你其實是點不到的！你其實是點不到的！你其實是點不到的！

親測：確實是這樣！！

有時間去探索具體原因了！知其然，標記下！

如有錯誤！歡迎指正！