The label is used for the input items in the form, and the Bootstrap library is referenced at the same time, resulting in an increase in the input click effect area. labelbootstrap

The label is used for the input items in the form, and the Bootstrap library is referenced at the same time, resulting in an increase in the input click effect area. labelbootstrap

The product elder sister has many ideas. Only by clicking the input item can she focus on the operations. When clicking the external button, no response can be made.

Okay... Go straight to the subject

To make tags more semantic, we often use label for encapsulation in form items.

<label for="label-input">    <input type="text" class="" id="label-input"><br>    <button>button</button></label>

In the development of the mobile platform page, to make the vertex area of the form item become larger and better, the label can provide corresponding convenience.

But sometimes, we only need label labels, but do not want to increase the area without reason. The introduction of Bootstrap automatically increases the accessible area.

As shown in, you only need to click the input item to produce results. However, clicking other empty areas in the label triggers the event (note that clicking the button does not trigger the event)

Only the Bootstrap Style Library is introduced.

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">

 

To solve this problem, try to determine the event-triggered object. However, the INPUT tag is always invalid. It is not scientific.

$('#label-input').click(function(e) {    var elem = e.target;    console.log(elem.tagName);    if (elem.tagName !== 'INPUT') {        return false;    }})

 

What can I do?

I thought of another method. I made another listener and clicked label, and then directly returned false., OK ~

$('label').click(function() {    return false;});$('#label-input').click(function(e) {    var elem = e.target;    console.log(elem.tagName);})