如何使用锚点使完整的 DIV 可单击...但在该 DIV 内部，有一个不跟随该锚点的输入按钮？答案

【问题标题】：How do I make a full DIV clickable with an anchor...but inside that DIV, have an input button that doesn't follow that anchor?如何使用锚点使完整的 DIV 可单击...但在该 DIV 内部，有一个不跟随该锚点的输入按钮？
【发布时间】：2010-02-20 07:08:48
【问题描述】：

我试过了：

<div style="display:block;">
<a href="/go" style="display:block;height:100%;width:100%;position:absolute;"></a>
LOTS OF STUFF HERE 
<input type="button" onclick="runsomething();return false;">
</div>

但它不起作用。它确实单击以跟随锚点...但按钮也跟随锚点，这是我不想要的。

编辑：按钮甚至不会点击。压不下来！就像 Anchor 完全覆盖了它。

【问题讨论】：

标签： javascript html css templates

【解决方案1】：

您可以使事件从按钮上方停止传播，使其永远不会到达 DIV。

$(".myDiv input").click(function(e){
  e.stopPropagation();
});

有关event.stopPropagation的更多信息，请参阅http://api.jquery.com/event.stopPropagation/

由于某种原因，您的锚点占据了父容器的整个大小。为什么？这将掩盖您的按钮，可能会使其无法锁定。我了解您希望使整个 DIV 可点击，但这是错误的方法。考虑以下几点：

$(".myDiv").click(function(){
  window.location = $("a:first", this).attr("href");
});

这将导致单击此 DIV 将用户发送到其链接会将他们发送到的任何位置。最好的事情是您不需要向链接或 DIV 添加任何 CSS。 Javascript 将在 div 中找到链接，获取其 href 值，然后将用户发送到该方向。

【讨论】：

按钮甚至不会点击。压不下来！就像 Anchor 完全覆盖它一样。
这可能是因为您的锚点根据您的 CSS 完全覆盖了它 :) 如果您有这样做的理由，我相信您。