表单input项使用label,同时引用Bootstrap库,导致input点击效果区增大

PHP中文网
Freigeben: 2017-06-07 13:26:01
Original
1700 Leute haben es durchsucht
产品姐姐想法多,点击input项才能聚焦进行操作,点击外部不能有反应
Nach dem Login kopieren

为了让标签更加语义化,在表单项中,我们往往会使用label进行包裹

<label for="label-input"><input type="text" class="" id="label-input"><br><button>buttonbutton>label>
Nach dem Login kopieren

在移动平台页面的开发中,为了让表单项的可点区域变大而更好的操作,label可提供相应的便利。

但有时,我们只是需要label标签,却不希望可点区域无故增大。而Bootstrap的引入,自动增大了可点区域

如上图所示,只是希望点击input项才产生效果,但点击label标签内的其他空区域就触发了(注意到点击button不会触发)

只是引入了Bootstrap的样式库

<link rel="stylesheet" type="text/css" href="bootstrap.min.css?1.2.45">
Nach dem Login kopieren

为了解决,尝试判断事件触发的对象。然而,无效,始终是INPUT标签,不科学呀

$(&#39;#label-input&#39;).click(function(e) {var elem = e.target;
    console.log(elem.tagName);if (elem.tagName !== &#39;INPUT&#39;) {return false;
    }
})
Nach dem Login kopieren

这可咋办咧

想到了一种方法,再弄个监听点击label的,然后直接return false,OK~

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

$(&#39;#label-input&#39;).click(function(e) {var elem = e.target;
    console.log(elem.tagName);
})
Nach dem Login kopieren


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!