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