首頁 > web前端 > html教學 > 表單input項目使用label,同時引用Bootstrap函式庫,導致input點擊效果區增大

表單input項目使用label,同時引用Bootstrap函式庫,導致input點擊效果區增大

PHP中文网
發布: 2017-06-07 13:26:01
原創
1768 人瀏覽過
产品姐姐想法多,点击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不會觸發)

只是引入了Bootstrap的樣式庫

$(&#39;#label-input&#39;).click(function(e) {var elem = e.target;
    console.log(elem.tagName);if (elem.tagName !== &#39;INPUT&#39;) {return false;
    }
})
登入後複製
為了解決,嘗試判斷事件觸發的物件

。然而,無效,總是

INPUT標籤,不科學呀

$(&#39;label&#39;).click(function() {return false;
});

$(&#39;#label-input&#39;).click(function(e) {var elem = e.target;
    console.log(elem.tagName);
})
登入後複製

 

這可咋辦咧

想到了一種方法,再弄個監聽點擊lab OK~rrreee


🎜🎜
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板