产品姐姐想法多,点击input项才能聚焦进行操作,点击外部不能有反应
為了讓標籤更語意化,在表單項目中,我們傾向於使用label進行包裹
<label for="label-input"><input type="text" class="" id="label-input"><br><button>buttonbutton>label>
語意化,在表單項目中,我們傾向於使用label進行包裹
<link rel="stylesheet" type="text/css" href="bootstrap.min.css?1.2.45">
在行動平台頁面的開發中,為了讓表單單的點更好的操作,label可提供相對應的便利。
但有時,我們只是需要label標籤,卻不希望可點區域無故增大。而Bootstrap的引入,自動增大了可點區域
如上圖所示,只是希望點擊input項才產生效果,但點擊label標籤內的其他空區域就觸發了(注意到點擊button不會觸發)$('#label-input').click(function(e) {var elem = e.target; console.log(elem.tagName);if (elem.tagName !== 'INPUT') {return false; } })為了解決,嘗試判斷事件觸發的物件。然而,無效,總是
INPUT標籤,不科學呀
$('label').click(function() {return false; }); $('#label-input').click(function(e) {var elem = e.target; console.log(elem.tagName); })
這可咋辦咧
想到了一種方法,再弄個監聽點擊lab OK~rrreee