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

Show Interactive Html elements on top of an anchor tag

本文关键字：交互式 Html 元素 显示 顶部      更新时间：2023-09-26

我有一个被锚标签包围的区域，它应该被定向到锚标签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 内。

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

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

内容模型：

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

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

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

使用这个

<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();
        }

为文本字段引入 onclick 并对事件使用停止传播方法。 例如，

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

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

相关文章：