javascript - 在 anchor 标记顶部显示交互式 Html 元素

Question

我有一个被 anchor 标记包围的区域，只要用户点击该区域，它就应该指向 anchor 标记 href。该区域还应包含一个文本框和按钮控件，允许用户键入一些文本并提交。问题是当我单击文本框或按钮时，它会重定向到 anchor 标记中给定的页面。

    <a href="http://stackoverflow.com/">
<div style="border:1px solid grey;width:300px;height:100px;">
    <div style="">Title</div>
     <div>
    <input type="text" name="name">
    <button type="button" onclick="alert('button clicked');">Click Me!</button>
</div>
</div>
</a>

请引用这个jsfiddle . 我在这里创建了一个简化的问题。 但是，我通过给出负边距顶部值找到了解决方案。它正在工作，但我对更好的解决方案感兴趣。因为此解决方案不可扩展，因为按钮和文本框不在内容 div 内。

这些部分中的每一个都代表搜索结果中的一个元素。当用户单击搜索项时，它将导航到单个元素页面。同时，用户应该能够通过选择编辑选项从搜索结果 View 中编辑内容。当他们选择编辑时，应该会出现一个文本框和一个提交按钮。

Answer 1

不幸的是，HTML5 规范说明了 <a> element :

Content model:

Transparent, but there must be no interactive content descendant.

这意味着，一个 <a>允许元素包含其父元素允许包含的任何元素，但类似 ​​<button> 的元素除外。 .

您需要找到一种方法来获取您的 <button>和 <input>在 <a> 之外工作