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