javascript - 如何使完整的 DIV 可通过 anchor 单击...但在该 DIV 中，有一个不跟随该 anchor 的输入按钮？

Question

我试过这个:

<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 ...但按钮也跟随 anchor ，这是我不想要的。

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

Answer 1

您可以使事件停止从按钮向上传播，这样它就永远不会到达 DIV。

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

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

出于某种原因，您的 anchor 占据了父容器的整个大小。为什么？这将掩盖您的按钮，可能使其无法点击。我知道您想使整个 DIV 都可以点击，但这是错误的方法。请考虑以下事项:

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

这将导致点击此 DIV 将用户发送到其链接将发送给他们的任何地方。最好的事情是您不需要向您的链接或 DIV 添加任何 CSS。 Javascript 将去寻找 div 中的链接，获取它的 href 值，然后将用户发送到那个方向。