表單input項(xiàng)使用label同時引用Bootstrap庫導(dǎo)致input點(diǎn)擊效果區(qū)增大問題
更新時間：2016年10月11日 08:47:36 投稿：mrr
這篇文章主要介紹了表單input項(xiàng)使用label，同時引用Bootstrap庫，導(dǎo)致input點(diǎn)擊效果區(qū)增大問題的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
為了讓標(biāo)簽更加語義化，在表單項(xiàng)中，我們往往會使用label進(jìn)行包裹
<label for="label-input"> <input type="text" class="" id="label-input"><br> <button>button</button> </label>
在移動平臺頁面的開發(fā)中，為了讓表單項(xiàng)的可點(diǎn)區(qū)域變大而更好的操作，label可提供相應(yīng)的便利。
但有時，我們只是需要label標(biāo)簽，卻不希望可點(diǎn)區(qū)域無故增大。而Bootstrap的引入，自動增大了可點(diǎn)區(qū)域
如上圖所示，只是希望點(diǎn)擊input項(xiàng)才產(chǎn)生效果，但點(diǎn)擊label標(biāo)簽內(nèi)的其他空區(qū)域就觸發(fā)了（注意到點(diǎn)擊button不會觸發(fā)）
只是引入了Bootstrap的樣式庫
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
為了解決，嘗試判斷事件觸發(fā)的對象。然而，無效，始終是INPUT標(biāo)簽，不科學(xué)呀
$('#label-input').click(function(e) {
var elem = e.target;
console.log(elem.tagName);
if (elem.tagName !== 'INPUT') {
return false;
}
})
這可咋辦咧
想到了一種方法，再弄個監(jiān)聽點(diǎn)擊label的，然后直接return false，OK~
$('label').click(function() {
return false;
});
$('#label-input').click(function(e) {
var elem = e.target;
console.log(elem.tagName);
})
好了，本文所述到此結(jié)束，希望對大家有所幫助！
相關(guān)文章
javascript輕松實(shí)現(xiàn)當(dāng)鼠標(biāo)移開時已彈出子菜單自動消失
本文為大家詳細(xì)介紹下使用javascript實(shí)現(xiàn)當(dāng)鼠標(biāo)移開時已彈出子菜單自動消失，具體如下，感興趣的朋友不要錯過2013-12-12
微信小程序?qū)崿F(xiàn)日期格式化和倒計(jì)時
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)日期格式化和倒計(jì)時，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
有了泛型之后一個函數(shù)或容器類能處理的類型一下子擴(kuò)到了無限大,似乎有點(diǎn)失控的感覺,所以這里又產(chǎn)生了一個約束的概念,下面這篇文章主要給大家介紹了關(guān)于TypeScript泛型約束條件的相關(guān)資料,需要的朋友可以參考下2022-04-04
提高團(tuán)隊(duì)代碼質(zhì)量利器ESLint及Prettier詳解
這篇文章主要為大家介紹了提高團(tuán)隊(duì)代碼質(zhì)量利器ESLint及Prettier使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)banner圖輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)五子棋小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了ES2020系列之空值合并運(yùn)算符 '??'，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
js change,propertychange,input事件小議
github上關(guān)于mootools一個issue的討論很有意思，所以就想測試記錄下。感興趣的可以點(diǎn)擊原頁面看看2011-12-12
TypeScript中的類型運(yùn)算符實(shí)現(xiàn)
TypeScript 是一種強(qiáng)類型語言,它通過使用類型運(yùn)算符來強(qiáng)化類型安全性,本文主要介紹了TypeScript中的類型運(yùn)算符實(shí)現(xiàn),感興趣的可以了解一下2023-10-10
在《理解Javascript_12_執(zhí)行模型淺析》一文中,我們初步的了解了執(zhí)行上下文與作用域的概念，那么這一篇將深入分析執(zhí)行上下文的構(gòu)建過程，了解執(zhí)行上下文、函數(shù)對象、作用域三者之間的關(guān)系。2010-10-10