label标签的二次点击事件

来源：互联网发布：mac baren烟丝购买编辑：程序博客网时间：2024/05/21 18:36

在做一个问卷调查页面的时候，因为自定义选框样式，隐藏掉了单选框和复选框的input标签，用与之关联的label的伪类样式实现选框的自定义样式。因为问卷存在问题跳转，需要根据某个问题不同的选择展示接下来的问题，这样就涉及到在click事件后获取选框选中的值的问题。当我在包含所有option的div上增加了点击事件后，发现第一次点击并不能获取相应input的值，所得为undefined，而第二次点击后，会得到第一次点击的值。后来就发现了label标签的两次点击事件。于是对label标签和点击事件做了一些实验。
html代码如下，在单选部分的div/input/label上分别设置了id，来测试不同部分的点击事件。

<body>    <div id="select1">        <input type="radio" name="sex" value="male" id="male"><label for="male" id="maleLabel">男</label><br>        <input type="radio" name="sex" value="female" id="female"><label for="female">女</label>    </div>    <div id="select2">        <input type="checkbox" name="num" value="a" id="1"><label for="1">A</label><br>        <input type="checkbox" name="num" value="b" id="2"><label for="2">B</label><br>        <input type="checkbox" name="num" value="c" id="3"><label for="3">C</label>    </div></body>

当在select1上设置点击事件并点击label部分时，控制台输出如下：

$("#select1").click(function(){    var val  = $('input[name="sex"]:checked').val();                console.log(val);           });

这里写图片描述
点击事件出现了两次，一次是发生label上，此时input上并没有点击事件，所以输出为undefined，第二次点击事件发生在与之关联的input上，得到选中的值。
此时如点击发生在input部分，则不会有undefined出现。
所以，当我把点击事件设置在label上时，就会出现第一次得到undefined，第二次得到第一次点击的值了，因为label的click事件发生时，input的click事件还没发生。
因此，在把input隐藏掉的情况下，要想获得click选中的值，就只有把click事件定义在包含input和label的外层div上了。不过由于项目中对option使用了ng-repeat，使用index来间接判断选中的选项也是可以的，这样click事件就可以定义在label上了。
项目中的dom结构如下：

<div class="ques-item hide1 show1" id="q4">    <div class="ques-item-question">        4.{{questions[3].questionContent}}    </div>    <div class="ques-item-option">        <div ng-repeat="option in questions[3].options">            <input type="{{questions[3].questionType}}" name="problem4" value="{{option.optionCode}}" id="{{option.id}}">            <label for="{{option.id}}" ng-click="clickShow(4, $index)">{{option.optionContent}}            </label>            <textarea ng-if="$index == 3" class="ques-option-text" name="" id="" cols="30" rows="1" ng-model="text4">            </textarea>        </div>    </div></div>

0 0