探究一下label标签关联表单元素

与表单控件建立关联

label可以关联表单，那什么情况才会创建出来关联关系呢？

1. label内嵌表单

<label><input type=checkbox name=lost> Lost</label>

如果是多个表单，会关联最近的元素。如下，点击文本，只会关联到第一个input：

<label>
  <input type="checkbox" name="lost" /> Lost
  <input type="checkbox" name="lost1" /> Lost1
  <input type="checkbox" name="lost2" /> Lost2
</label>

2. label通过for属性，表单id建立联系

<p>
    <label for="pc1">Post code: </label>
    <input name="pc" id="pc1" />
</p>

内嵌绑定事件

如下，若给label绑上事件，会发生什么呢？

<label @click="handleClick">
	<span>测试</span>
	<input type="text"/>
</label>

handleClick(e) {
	console.log('handleClick', e)
}

哈？

考虑到label会有默认的关联行为，我们把label标签换成div/p/span

<div @click="handleClick"><span>测试</span><input type="text"/></div>

1. 阻止label默认行为 event.preventDefault()

<label @click.prevent="handleClick">
	<span>测试</span>
	<input type="text"/>
</label>

2. 使用for属性，指向为空

<label for="" @click="handleClick">
  <span>测试</span>
	<input type="text"/>
</label>

为什么会打印两次

HTML Standard html.spec.whatwg.org/multipage/f… 中有以下描述：

For example, on platforms where clicking a label activates the form control, clicking the label in the following snippet could trigger the user agent to fire a click event at the input element, as if the element itself had been triggered by the user:

<label><input type=checkbox name=lost> Lost</label>

大概意思就是，如果点击label，会触发绑定在Input上的点击事件，会认为是由用户触发。我们来看一下是怎么回事，我们先在input上监听以下click事件，

<label @click="handleClick">
	<span>测试</span>
	<input @click="handleInputClick" type="text"/>
</label>

handleClick(e) {
  console.log('handleClick', e)
},
handleInputClick(e) {
  console.log('handleInputClick', e)
},

点击label后：

我们可以简单分析一下事件过程：

label click -> input click -> label click

从input上冒泡，导致label又触发了一次。

那如果要触发一次，还可以这么做：

handleInputClick(e) {
  e.stopPropagation()
  console.log('handleInputClick', e)
}

阻止input的冒泡。

总结

1. 如果在label上点击，不触发关联，可以
   1. 通过for=''指向一个空的关联；
   2. 或者通过@click.prevent阻止默认关联行为。
2. 如果label上点击，input同时触发，但不需要label执行两次，可以通过input上加e.stopPropagation()，阻止input的冒泡；
3. 或者label换为div等标签。

element ui的radio实现点击选中、取消切换

element ui的radio，点击后，是不支持点击再取消，大概写了一下elementui实现radio点击切换选中状态

#朝花夕拾/Front-end/HTML和CSS