表单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 相关文章推荐
jQuery简单实现banner图片切换
Jan 02 Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
Oct 01 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 Javascript
KnockoutJS数组比较算法实例详解
Nov 25 Javascript
Node.JS如何实现JWT原理
Sep 18 Javascript
JS封装cavans多种滤镜组件
Feb 15 Javascript
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
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
详解php命令注入攻击
2019/04/06 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
Python读写Excel文件方法介绍
2014/11/22 Python
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
机器学习经典算法-logistic回归代码详解
2017/12/22 Python
单利模式及python实现方式详解
2018/03/20 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
Flask使用Pyecharts在单个页面展示多个图表的方法
2019/08/05 Python
python利用 keyboard 库记录键盘事件
2020/10/16 Python
全天然狗零食:Best Bully Sticks
2016/09/22 全球购物
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
数控专业毕业生求职信
2014/06/12 职场文书
中学生检讨书范文
2014/11/03 职场文书
关于颐和园的导游词
2015/01/30 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
教研活动主持词
2015/07/03 职场文书
音乐研修感悟
2015/11/18 职场文书
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python