关于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便签中的所有的元素，你其实是点不到的！你其实是点不到的！你其实是点不到的！

亲测：确实是这样！！

有时间去探索具体原因了！知其然，标记下！

如有错误！欢迎指正！

关于label的点击事件(原创)

推荐阅读