0

我有一个被锚标签包围的区域，无论用户点击该区域，它都应该被定向到锚标签 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。我在这里创建了一个简化的问题。但是，我通过给出负边距顶部值找到了解决方案。它正在工作，但我对更好的解决方案感兴趣。因为此解决方案不可扩展，因为按钮和文本框不在内容 div 内。

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

4

3 回答 3

3

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

内容模型：

透明，但不能有交互式内容后代。

这意味着，一个<a>元素被允许包含其父元素被允许包含的任何元素，除了<button>.

你需要找到一种方法让你的<button>和<input>工作在外面<a>

于 2013-10-10T09:44:16.910 回答
0

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

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

另一种替代方法是使用<div onclick="function()">而不是<a>标签来表示您认为要实现的目标

于 2013-10-10T12:59:37.313 回答
0

用这个

<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();
        }
于 2013-10-10T09:55:10.577 回答