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。我在这里创建了一个简化的问题。但是我通过给出负边缘值来找到解决方案。它工作正常，但我对更好的解决方案感兴趣。因为此解决方案不可伸缩，因为按钮和文本框不在内容div中。

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

Answer 1

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

内容模型：

透明，但必须没有interactive content后代。

这意味着，允许<a>元素包含允许其父级包含的任何元素，<button>之类的内容除外。

您需要找到一种方法让<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

为textfield引入onclick并对事件使用stoppropagation方法。对于前，

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

另一个替代方法是使用<div onclick="function()">代替<a>代码来实现您的目标

在锚标记之上显示交互式Html元素

3 个答案: