为什么不应在锚点中使用交互式元素?

问题描述

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

Simply out of curiosity - I have been nailed in my previous question for trying to put button within an anchored image. I looked at documentations and other questions and although everyone is saying that it should not be done, they are not saying why.

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

Even the documentation http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element states that there should be no interactive content within anchor, but does not tell me the reasoning.

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

Does anyone know why is it such a horrible practice to do so?

推荐答案

想象一下这种情况:

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

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

Now when you press on select element these actions will take effect (in order):

1. 打开选择下拉菜单.
2. 将 click 事件添加到父级(在本例中为 ).
3. 元素跟随它的 href 值(此时您离开当前页面).
4. (经过人体的一些延迟)您将选择所需的选项(但您已经离开了网站)

1. Open select dropdown.
2. Bubble click event to parent (<a> in this case).
3. <a> element follows it's href value (at this point you leave current page).
4. (after some delay by human body) You would select desired option (but you had already left website)

这篇关于为什么不应在锚点中使用交互式元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！