=波波日志 > HTML/WML/CSS兼容/XML > label标签在IE，w3c浏览器firefox下的区别=
label标签在IE，w3c浏览器firefox下的区别
关键字：表单，label，提交按钮，分组在IE浏览器和w3c浏览器，如Firefox的异同
label标签在w3c浏览器[如Firefox，google的chrome]下有分组的功能，点击label非第一个子节点的时候，会触发第一个子节点的相应的默认事件或者添加的对应的事件，IE下则不会。
依我自己的理解是，在w3c浏览器下，使用label作为控件容器时，只有对第一个子节点操作时，才会执行第一个子节点的操作。如果是对第一个子节点进行操作，除了触发当前节点的事件完毕后，继续触发第一个节点的对应的事件/默认事件
所以在w3c浏览器下使用label作为控件的容器的时候要小心了，要不不理解会导致自己后面很多麻烦。
还是因为在修改代码的时候，由于将一个普通按钮和一个提交按钮放在了一个label标签里面，普通按钮在提交按钮后面。普通按钮添加onclick事件，用来做一些处理的，不提交表单。但是由于放在了lable里面，结果在Firefox里面，处理完后把表单给提交了，NND。。
测试代码如下
label标签在w3c浏览器[如Firefox，google的chrome]下有分组的功能，点击label非第一个子节点的时候，会触发第一个子节点的相应的默认事件或者添加的对应的事件，IE下则不会。
依我自己的理解是，在w3c浏览器下，使用label作为控件容器时，只有对第一个子节点操作时，才会执行第一个子节点的操作。如果是对第一个子节点进行操作，除了触发当前节点的事件完毕后，继续触发第一个节点的对应的事件/默认事件
所以在w3c浏览器下使用label作为控件的容器的时候要小心了，要不不理解会导致自己后面很多麻烦。
还是因为在修改代码的时候，由于将一个普通按钮和一个提交按钮放在了一个label标签里面，普通按钮在提交按钮后面。普通按钮添加onclick事件，用来做一些处理的，不提交表单。但是由于放在了lable里面，结果在Firefox里面，处理完后把表单给提交了，NND。。
测试代码如下
+展开
-HTML
<form onsubmit="return ck()" method="post">
用label作为checkbox和描述文字的容器，点击文字会勾选或者取消勾选复选框<br >
<label><input type="checkbox" />111</label><br >
不用label作为checkbox和描述文字的容器，点击文字不会勾选或者取消勾选复选框，需要直接用鼠标点击复选框才行<br >
<input type="checkbox" />2222<br >
不使用label进行分组的按钮，点击普通按钮不会执行onsumit事件<br >
<input type="submit" value="提交按钮" /> <input type="button" value="普通按钮" /><br >
使用label进行分组的按钮，点击普通按钮会执行onsumit事件<br >
<label><input type="submit" value="提交按钮" /> <input onclick="alert('我是普通按钮2')" type="button" value="普通按钮" /></label>
使用label进行分组的按钮，点击普通按钮或者提交按钮都会执行普通按钮1的onclick事件<br >
<label><input type="button" onclick="alert('我是普通按钮1')" value="普通按钮1" /> <input type="submit" value="提交按钮" /> <input onclick="alert('我是普通按钮2')" type="button" value="普通按钮2" /></label>
</form>
用label作为checkbox和描述文字的容器，点击文字会勾选或者取消勾选复选框<br >
<label><input type="checkbox" />111</label><br >
不用label作为checkbox和描述文字的容器，点击文字不会勾选或者取消勾选复选框，需要直接用鼠标点击复选框才行<br >
<input type="checkbox" />2222<br >
不使用label进行分组的按钮，点击普通按钮不会执行onsumit事件<br >
<input type="submit" value="提交按钮" /> <input type="button" value="普通按钮" /><br >
使用label进行分组的按钮，点击普通按钮会执行onsumit事件<br >
<label><input type="submit" value="提交按钮" /> <input onclick="alert('我是普通按钮2')" type="button" value="普通按钮" /></label>
使用label进行分组的按钮，点击普通按钮或者提交按钮都会执行普通按钮1的onclick事件<br >
<label><input type="button" onclick="alert('我是普通按钮1')" value="普通按钮1" /> <input type="submit" value="提交按钮" /> <input onclick="alert('我是普通按钮2')" type="button" value="普通按钮2" /></label>
</form>
类别：HTML/WML/CSS兼容/XML 作者：波波 日期：2011-02-22 【评论：0】
相关文章
- ·button,input type=button按钮在IE和w3c，firefox浏览器区别
- ·IE/Firefox/W3C浏览器代码触发事件
- ·IE浏览器和firefox/W3C浏览器获取class属性问题
- ·Firefox/w3c浏览器如何操作XML文档
- ·使png图片在ie浏览器下也支持透明
- ·firefox和IE下activeElement在onblur事件中的表现
- ·Firefox及W3C浏览器table设置margin属性不居中
- ·ie和firefox下操作table对象的异同
- ·IE，Firefox下自定义属性获取的异同
- ·JavaScript调用flash.external.ExternalInterface.addCallback注册的函数在不同浏览器下的分析
- ·div+css兼容IE和firefox等浏览器方法
- ·在FireFox浏览器中asp.net+AJAX传输的中文字符串到服务器端后乱码的问题!!!!
暂时没有评论！
发表留言
