The form input item uses label to refer to the bootstrap library at the same time causing the input click Effect area to increase the problem _javascript skills

In order to make the label more semantic, in the form item, we tend to use label to wrap

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

In the development of mobile platform pages, in order to make the point area of the table items larger and better operation, label can provide the appropriate convenience.

But sometimes, we just need label labels, but we don't want the point area to increase without any reason. But the introduction of bootstrap automatically increases the point area

As shown in the figure above, you just want to click on the input item to produce an effect, but clicking on the other empty area within the label tag triggers (note that clicking the button does not trigger)

Just introduced the bootstrap style gallery.

<link rel= "stylesheet" type= "Text/css" href= "Bootstrap.min.css" >

To resolve, try to determine the object that the event triggers. However, invalid, is always input label, unscientific AH

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

What can I do about it?

Think of a way, and then get a listener click Label, and then directly return false,ok~

$ (' label '). Click (function () {return
false;
});
$ (' #label-input '). Click (function (e) {
var elem = e.target;
Console.log (Elem.tagname);
})

Well, this is the end of this article, I hope to help you!