表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
更新时间：2016年10月11日 08:47:36 投稿：mrr
这篇文章主要介绍了表单input项使用label，同时引用Bootstrap库，导致input点击效果区增大问题的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
为了让标签更加语义化，在表单项中，我们往往会使用label进行包裹
<label for="label-input"> <input type="text" class="" id="label-input"><br> <button>button</button> </label>
在移动平台页面的开发中，为了让表单项的可点区域变大而更好的操作，label可提供相应的便利。
但有时，我们只是需要label标签，却不希望可点区域无故增大。而Bootstrap的引入，自动增大了可点区域
如上图所示，只是希望点击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;
}
})
这可咋办咧
想到了一种方法，再弄个监听点击label的，然后直接return false，OK~
$('label').click(function() {
return false;
});
$('#label-input').click(function(e) {
var elem = e.target;
console.log(elem.tagName);
})
好了，本文所述到此结束，希望对大家有所帮助！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了JS去掉字符串前后空格、阻止表单提交的实现代码，代码简单易懂，非常不错，具有参考借鉴价值,需要的朋友可以参考下2017-06-06
这篇文章主要给大家介绍了关于ES7中javascript修饰器的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用ES7具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-05-05
本篇文章主要分享了获取今天，昨天，本周，上周，本月，上月时间实例代码，具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
在这篇内容中，我们把这套框架上的免费字体图标做了个整合(当然，以后还会不断的更新)。大家对bootstrap免费字体图标有需要的话，可以参考本教程2017-03-03
在做网站的时候，往往图片的处理很重要，固定尺寸容易变形拉伸，不固定又会有不可预知的问题，有可能撑开页面。2009-08-08
下面小编就为大家带来一篇输入法的回车与消息发送快捷键回车的冲突解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
JavaScript中使用document.write向页面输出内容实例
这篇文章主要介绍了JavaScript中使用document.write向页面输出内容实例,本文讲解了输出普通文字、带HTML标签内容的方法,需要的朋友可以参考下2014-10-10
这篇文章主要介绍了微信小程序列表埋点曝光指南，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要介绍了js实现调用网络摄像头及常见错误处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
情人节将至 程序员证明自己不是直男的时候到啦 我们也有自己的专属代码浪漫。本文将介绍七个利用JavaScript实现的情人节表白特效，需要的可以参考一下2022-01-01
最新评论