为什么不应该在锚中使用交互元素？

Question

只是出于好奇 - 我在上一个问题中因为试图将按钮放在锚定图像中而被钉牢。我查看了文档和其他问题，虽然每个人都说不应该这样做，但他们没有说明原因。

即使是http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element 的文档也声明锚点内不应该有交互式内容，但没有告诉我原因。

有谁知道为什么这样做是一种可怕的做法？

Answer 1

想象一下这种情况：

<a href="http://google.com">
  <select>
    <option>V1</option>
    <option>V2</option>
  </select>
</a>

现在，当您按下select 元素时，这些操作将生效（按顺序）：

1. 打开选择下拉菜单。
2. 将click 事件冒泡到父级（在本例中为<a>）。
3. <a> 元素跟随它的 href 值（此时您离开当前页面）。
4. （经过人体延迟）您会选择所需的选项（但您已经离开网站）