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

出品姐姐想法多,点击input项才会聚焦进行操作,点击外部不克生反馈

好了。。。直入正题

为吃标签越来越语义化,在说明单项中,我们累会动用label进行打包

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

图片 1

在运动平台页面的支付中,为了让表单项的可是点区域易死而重复好的操作,label可资对应的好。

但是偶尔,我们只是用label标签,却非指望而点区域无故增大。而Bootstrap的引入,自动叠加了而触及区域

图片 2

如若达到图所示,只是希望点击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;
    }
})

图片 3

 

马上不过咋办咧

想开了一样栽办法,再为个监听点击label的,然后直接return false,OK~

$('label').click(function() {
    return false;
});

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

图片 4

相关文章