按钮的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"></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"></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就可以绑定。

label标签的显示和隐式关联问题的更多相关文章

  1. Intent 显示意图 隐式意图

    //显式意图  :必须指定要激活的组件的完整包名和类名 (应用程序之间耦合在一起) // 一般激活自己应用的组件的时候 采用显示意图  //隐式意图: 只需要指定要动作和数据就可以 ( 好处应用程序之 ...

  2. Android中显示和隐式Intent的使用

    显示启动activity                                                                                         ...

  3. Android中Intent的显示和隐式使用

    Android应用程序中组件之间的通信都少不了Intent的使用,Intent负责对应用中一次操作的动作.动作涉及数据.附加数据进行描述,Android则根据此Intent的描述,负责找到对应的组件, ...

  4. C#接口的显示和隐式实现

    早上骑车上班走到半路发现手机忘带了,这年代兜里没装一分现金,吃饭都要刷手机,上班时间无聊了不能玩手机更是大问题,所以果断掉头拿手机.取完手机刚出门看这天阴沉沉的貌似要下雨,没雨衣,骑车又不能打伞,上次 ...

  5. C# 转换符的重载 显示、隐式转换

    class Complex { //保存转换的值 Int32 v; public Complex(Int32 x) { v = x; } public Int32 ToInt32() { return ...

  6. 2017-3-2 C# WindowsForm 中label标签居中显示

    有时候label标签要输出 label.text=""; 的语句,那么要把这个语句居中显示 1.要取消他的Autosize的值 2.拉大这个框,设置里面的文本的TextAlign ...

  7. angularJS1笔记-(7)-控制器的合理使用(显示和隐式的依赖注入)

    AngularJS依赖注入 1.隐式注入:不需要开发人员干预,angularJS自动根据参数的名称识别和注入数据 app.controller("myCtrl".function( ...

  8. 【Selenium】显示、隐式等待

    显示等待 WebDriverWait 超时抛出TimeOutException,默认500毫秒 public class WaitToReturnElement { /* * 设置超时时间为5秒,返回 ...

  9. interface Part3（实现：显示和隐式）

    1. 接口的实现实际上和类之间的继承是一样的,也是重写了接口中的方法,让其有了具体的实现内容. 2. 但需要注意的是,在类中实现一个接口时必须将接口中的所有成员都实现,否则该类必须声明为抽象类,并将接 ...

随机推荐

  1. python语言中的数据类型之列表

    数据类型及内置方法 列表: list    可变类型,有序 用途:用来记录多个值(同属性) 定义方式:在[  ]内用逗号分隔开多个任意类型的值 l=['a','b','c'] #l=list(['a' ...

  2. 使用pt-table-checksum及pt-table-sync校验复制一致性

    一.简介 pt-table-checksum是percona-toolkit系列工具中的一个, 可以用来检测主. 从数据库中数据的一致性.其原理是在主库上运行, 对同步的表进行checksum, 记录 ...

  3. 黑马2018年JavaEE课程大纲

    包含   黑马旅游网   企业级权限管理系统    品优购    十次方   乐优(没有,十次方级别) http://www.itheima.com/course/javaeetext.html 传智 ...

  4. 【357】sorted 函数高级用法

    参考:Python 内置函数sorted()在高级用法 - Brad1994 - 博客园 sorted 函数主要实现的就是对于可迭代对象进行排序,对于一维数据排序很好理解与实现,直接调用即可,本文主要 ...

  5. HTML 样式兼容不同设备类型

    在项目中遇到在屏幕上显示的效果和打印时显示的效果不同,可以使用media属性来指定用于不同的媒介时使用的样式. media属性值: 值 描述 screen 计算机屏幕显示(默认) tty 电传打字机以 ...

  6. 为什么使用DLL

    (1) 如果不同的程序使用相同的 DLL,只需将 DLL 在内存中装载一次,这样节省了系统内存.DLL 映射到每个进程(每运行一次应用程序)的专用地址空间中,但它们的代码使用的内存影像程序只在内存中装 ...

  7. UI简单工作

     UI用户界面 需求——效果图——风格设计——高保证效果——html 网页的宽度=屏幕的宽度-纵向滚动条的宽度 企业网站一般是1280 根据百度流量研究所 目前我们的网页注主要是1024和1200   ...

  8. [转载]FMS Dev Guide学习笔记(验证用户)

    一.开发交互式的媒体应用程序 1.使用外部资源验证用户 对于有限数量的客户,请求用户名密码,然后通过外部资源(像数据库.LDAP服务或其它访问授权服务)验证它们,是可行的.     a.SWF在请求连 ...

  9. python中的全局变量和局部变量（转）

    python中,对于变量作用域的规定有些不一样. 在诸如C/C++.java等编程语言中,默认在函数的内部是能够直接訪问在函数外定义的全局变量的,可是这一点在python中就会有问题.以下是一个样例. ...

  10. 关于ubuntu14.04,忘记root密码解决方案(经测试，内核3.13和4.2可行)。

    网上已经有很多方案啦,我这里就不画蛇添足,直接上链接: http://jingyan.baidu.com/article/c843ea0b9e851077931e4aea.html 注意,有些机子没有 ...