在锚标记顶部显示交互式 Html 元素答案

【问题标题】：Show Interactive Html elements on top of an anchor tag在锚标记顶部显示交互式 Html 元素
【发布时间】：2023-03-12 17:42:01
【问题描述】：

我有一个被锚标记包围的区域，无论用户单击该区域，它都应该被定向到锚标记 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 内。

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

【问题讨论】：

正如 Gareth 所说，答案是否定的。但是你到底想达到什么目的？你能描述一下你的初衷是什么，而不是说你做了什么吗？那么你也许能够得到更好的解决方案。

标签： javascript html css

【解决方案1】：

不幸的是，HTML5 规范提到了<a> element：

内容模型：

透明，但不能有interactive content后代。

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

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

【讨论】：

【解决方案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();
        }

【讨论】：

【解决方案3】：

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

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

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

【讨论】：