嵌套<a>与<input>控件默认行为差异及WHATWG规范解析

先看你给出的代码：

<a href="https://stackoverflow.com/">
    <span><input type="checkbox">Hello</span>
</a>

核心前提：规范禁止交互式内容嵌套 #

WHATWG HTML规范明确规定，交互式内容（比如<a>、<input>、<button>这类用户可直接交互的元素）不能作为其他交互式内容的子元素。你写的<a>包裹<input>属于不符合规范的嵌套，但浏览器会做兼容性容错处理，而非直接拒绝渲染。

点击复选框时的行为解释 #

当点击<input type="checkbox">时：

1. 优先执行复选框的默认行为：浏览器会先处理复选框的核心交互——切换选中状态，这是该控件的原生默认动作，优先级高于父级<a>的跳转行为。
2. 阻止父级<a>的跳转触发：根据规范，交互式元素的点击事件会抑制父级交互式元素的默认行为，避免出现“既勾选复选框又跳转链接”的冲突场景。
3. <a>的文本高亮是视觉反馈：你看到的高亮是<a>元素处于:active（激活）状态时的浏览器默认样式，因为点击动作的区域落在了<a>的范围内，视觉上会给出反馈，但不会触发跳转逻辑。

点击“Hello”文本时的行为解释 #

文本“Hello”不属于交互式内容，点击它时：

• 事件会正常向上冒泡到父级的<a>元素，触发<a>的原生默认行为——跳转到指定的URL，这符合规范中普通内容触发父级交互元素行为的规则。

内容的提问来源于stack exchange，提问作者MaximPro