表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题


Posted in Javascript onOctober 11, 2016

为了让标签更加语义化,在表单项中,我们往往会使用label进行包裹

<label for="label-input">
<input type="text" class="" id="label-input"><br>
<button>button</button>
</label>

表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题

在移动平台页面的开发中,为了让表单项的可点区域变大而更好的操作,label可提供相应的便利。

但有时,我们只是需要label标签,却不希望可点区域无故增大。而Bootstrap的引入,自动增大了可点区域

表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题

如上图所示,只是希望点击input项才产生效果,但点击label标签内的其他空区域就触发了(注意到点击button不会触发)

只是引入了Bootstrap的样式库

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">

为了解决,尝试判断事件触发的对象。然而,无效,始终是INPUT标签,不科学呀

$('#label-input').click(function(e) {
var elem = e.target;
console.log(elem.tagName);
if (elem.tagName !== 'INPUT') {
return false;
}
})

表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题

这可咋办咧

想到了一种方法,再弄个监听点击label的,然后直接return false,OK~

$('label').click(function() {
return false;
});
$('#label-input').click(function(e) {
var elem = e.target;
console.log(elem.tagName);
})

表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题

好了,本文所述到此结束,希望对大家有所帮助!

Javascript 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
jQuery 浮动广告实现代码
Dec 25 Javascript
javascript 防止刷新,后退,关闭
Aug 07 Javascript
JavaScript实现拼音排序的方法
Nov 20 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 Javascript
JavaScript基础语法之js表达式
Jun 07 Javascript
Bootstrap Modal遮罩弹出层(完整版)
Nov 21 Javascript
react router 4.0以上的路由应用详解
Sep 21 Javascript
JS实现DOM删除节点操作示例
Apr 04 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
javascript 动态脚本添加的简单方法
Oct 11 #Javascript
js HTML5上传示例代码完整版
Oct 10 #Javascript
JavaScript  event对象整理及详细介绍
Oct 10 #Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 #Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 #Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 #Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 #Javascript
You might like
js 方法实现返回多个数据的代码
2009/04/30 Javascript
Javascript 作用域使用说明
2009/08/13 Javascript
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
Python中的闭包详细介绍和实例
2014/11/21 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
Django继承自带user表并重写的例子
2019/11/18 Python
keras之权重初始化方式
2020/05/21 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
Python读取yaml文件的详细教程
2020/07/21 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
酒吧副总经理岗位职责
2013/12/10 职场文书
美术专业个人自我评价
2014/01/18 职场文书
《掌声》教学反思
2014/02/23 职场文书
教师中国梦演讲稿
2014/04/23 职场文书
学校师德师风整改措施
2014/10/27 职场文书
会议通知格式范文
2015/04/15 职场文书
综治目标管理责任书
2015/05/11 职场文书
如何避免mysql启动时错误及sock文件作用分析
2022/01/22 MySQL