亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

表單input項(xiàng)使用label同時(shí)引用Bootstrap庫(kù)導(dǎo)致input點(diǎn)擊效果區(qū)增大問(wèn)題

 更新時(shí)間：2016年10月11日 08:47:36   投稿：mrr  
這篇文章主要介紹了表單input項(xiàng)使用label，同時(shí)引用Bootstrap庫(kù)，導(dǎo)致input點(diǎn)擊效果區(qū)增大問(wèn)題的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

為了讓標(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)文章

最新評(píng)論