表单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 学习笔记(七)字符串的连接
Dec 31 Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
原生js实现日期联动
Jan 12 Javascript
封装好的一个万能检测表单的方法
Jan 21 Javascript
DOM 高级编程
May 06 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
详解vuex commit保存数据技巧
Dec 25 Javascript
eslint 的三大通用规则详解
May 16 Javascript
vue之debounce属性被移除及处理详解
Nov 13 Javascript
Vue常用API、高级API的相关总结
Feb 02 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
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
JavaScript 轻松搞定快捷留言功能 只需一行代码
2010/04/01 Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
2010/06/28 Javascript
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
JS库之Waypoints的用法详解
2017/09/13 Javascript
vue实现通讯录功能
2018/07/14 Javascript
JS通过位运算实现权限加解密
2018/08/14 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
python删除过期log文件操作实例解析
2018/01/31 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
python switch 实现多分支选择功能
2020/12/21 Python
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
英国第一职业高尔夫商店:Clickgolf.co.uk
2020/11/18 全球购物
成人毕业生自我鉴定
2013/10/18 职场文书
教研处工作方案
2014/05/26 职场文书
安全责任书怎么写
2014/07/28 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
入党积极分子考察意见
2015/06/02 职场文书
学校学期工作总结
2015/08/13 职场文书
这样写python注释让代码更加的优雅
2021/06/02 Python
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers
python+opencv实现目标跟踪过程
2022/06/21 Python