label标签的显示和隐式关联问题

按钮的html

 <!-- 学校 -->
                <div class="layui-inline">
                    <label class="layui-form-label">
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="yun.popOpen('/out/school/crmAddSchool', '添加学校信息','690','400')" title="#(i18n.get('新增学校'))">
                            <i class="layui-icon">&#xe654;</i>
                        </button>
                        #(i18n.get('学校'))
                    </label>
                    <div class="layui-input-inline">
                    <select id="school" name="personStudent.schoolId" onchange="yun.casSel(this,'/out/school/casSelName','grade')" lay-verify=""  >
                        <option ></option>
                        #for(school : schools )
                            <option value="#(school.id)">#(school.schoolName)</option>
                        #end
                    </select>
                    </div>
                </div>

问题：项目中出现的问题，学校前边有一个按钮是使用label包裹了button,给button添加了点击事件，每次点击的时候label总是会触发button的点击事件？

答案： 这个主要是label的绑定元素的问题，包裹元素即绑定了某个元素，那么给这个元素设置事件的时候等同于label也会会有事件了，这样点击button会触发事件，点击label也会触发事件。

想要的结果：这里的样式就是需要这样的，不可以改变。但是点击button触发事件，点击label不触发事件。

解决办法：这里主要是用到了layui的样式，所以只需要把label改成其他的标签就可以了，他的class保留，这样样式就保留下来了。

 <!-- 学校 -->
               
 <div class="layui-form-label">
  <button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="yun.popOpen('/out/school/crmAddSchool', '添加学校信息','690','400')" title="#(i18n.get('新增学校'))">
        <i class="layui-icon">&#xe654;</i>
   </button>
    #(i18n.get('学校'))
 </div>

这样就可以实现了。

这里介绍了官方的示例：

w3c示例

显式绑定
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>

提示和注释

注释：可以通过使用 "for" 属性将 label 绑定到另一个元素，或者直接在 label 元素内部放置元素。

使用for为lable关联指定的元素上，这样点击label的时候就等于是点击了绑定的元素。

这种使用for标签的方式是显示的方式

隐式的方式是把需要绑定的标签放到label内部，让label包裹上这个需要绑定的元素

隐式绑定
<!DOCTYPE HTML>
<html>
<body>

<form>
  <label>Male<input type="radio" name="sex" /></label>
  <br />
  <label>Female <input type="radio" name="sex"  /></label>
</form>

</body>
</html>

这样不使用for就可以绑定。

 

posted on 2018-06-08 13:25  淡淡人生过  阅读(3165)  评论(0)  编辑  收藏  举报

导航