表单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 相关文章推荐
javascript 表单验证常见正则
Sep 28 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
三种取消选中单选框radio的方法
Sep 09 Javascript
详解JS函数重载
Dec 04 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
Dec 20 Javascript
JS高级运动实例分析
Dec 20 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
vue-cli配置环境变量的方法
Jul 09 Javascript
解决Layui中layer报错的问题
Sep 03 Javascript
JS几个常用的函数和对象定义与用法示例
Jan 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
PHP 日,周,月点击排行统计
2012/01/11 PHP
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
php number_format() 函数通过千位分组来格式化数字的实现代码
2013/08/06 PHP
PHP Global定义全局变量使用说明
2013/08/15 PHP
PHP中基本HTTP认证技巧分析
2015/03/16 PHP
php实现购物车功能(上)
2020/07/23 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
js实现数组冒泡排序、快速排序原理
2016/03/08 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
Three.js基础部分学习
2017/01/08 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
2018/08/08 jQuery
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
Python函数参数类型*、**的区别
2015/04/11 Python
Python使用multiprocessing创建进程的方法
2015/06/04 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
python之拟合的实现
2019/07/19 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
tensorflow自定义激活函数实例
2020/02/04 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
餐饮加盟计划书
2014/01/10 职场文书
2015年科普工作总结
2015/07/23 职场文书
村主任当选感言
2015/08/01 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers