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

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. (人体延迟后)您将选择所需选项(但您已离开网站)