为什么交互式元素不能在锚中使用？

Question

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

即使是文档http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element也说明锚中不应该有互动内容，但是没有告诉我推理。

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

Answer 1

想象一下这种情况：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

1. 打开选择下拉列表。
2. 将click个事件冒充到父级（在这种情况下为<a>）。
3. <a>元素跟随href值（此时您将离开当前页面）。
4. （人体延迟一段时间后）你会选择所需的选项（但你已离开网站）