在定位标记顶部显示Interactive HTML元素

Question

我有一个由定位标记包围的区域，无论用户在该区域单击什么位置，都应将其定向到定位标记href。 该区域还应包含一个文本框和按钮控件，该控件应允许用户键入一些文本并提交。 问题是当我单击文本框或按钮时，它会重定向到锚标记中给定的页面。

    <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 。 我在这里创建了一个简化的问题。 但是，我通过给负的margin-top值找到了解决方案。 它正在工作，但我对更好的解决方案感兴趣。 由于此解决方案不可扩展，因为按钮和文本框不在content div内。

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

Answer 1

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

内容模型：

透明的，但必须没有交互式内容后代。

这就是说，除<button>类的内容外， <a>元素可以包含其父元素所包含的任何元素。

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

Answer 2

用这个

<input type="text" name="name" onclick="return false;" />

仅当您不想更改标记时才使用此选项。

最好的解决方案是使用HTML的语义并为其设置样式。 正如Gareth所指出的，这种方式是不正确的。

如果是按钮

<button type="button" onclick="buttonClick(event);">Click Me!</button>

function buttonClick(e) {
            alert('button clicked');
            e.preventDefault();
        }

Answer 3

为文本字段引入onclick并为事件使用stoppropagation方法。 例如，

textfield.onclick = function(e) {
e.stopPropagation();
}

另一种选择是使用<div onclick="function()">代替<a>标记来实现您认为的目标