label 双击禁止 html,关于html <label> 的一些事

先来一个例子:

function log(...args) {

let output = document.querySelector('pre');

output.textContent += args.join(' ') + '\n';

}

Button inside label:

ok

input inside label:

anchor inside label: I'm a link

Button attached with labelok

的用法熟悉 html 的人都知道, 在一些情况下也比较有意思:

如果 和 关联, click内的任何空间, 都相当直接 click 在 上. 这个特性常常会引起混乱, 通常需要避免.

但如果单击区域比较小, 利用 的这个特性, 可以扩大点击范围, 方便用户操作, 特别在触摸界面上. 比如图标按钮(使用透明的背景, 加大padding, 也可以实现, 但如果有复杂的 element, 使用 会更方便), 输入框.

最 native 的结合, 是 checkbox 和 输入框.