Question

我有一种情况，点击图像会将用户引导到某个链接，但按下图像中显示的按钮将改为运行javascript方法。但是，当按下按钮时，我无法阻止页面重定向到某个链接（单击按钮时也会运行javascript方法）。

我发现按钮不能嵌套在一个锚元素中，并尝试将按钮包装在一个表单中，但没有运气。

有没有人知道解决这个问题的方法？

代码中的基本逻辑看起来像这样

<a href="an item description link">
    <img src="an item image"/>
    <form style="display: inline" action="html_form_action.asp" method="get">
        <button type="button" id="add-btn" class="add-cart" onclick="quick_add()">+</button>
    </form>
</a>

提前感谢您的帮助！

Answer 1

验证的简单方法是将按钮叠加在链接上。这要求链接和按钮位于相同的包含元素中，并且要求它们都使用position: absolute：

HTML

<div class="box">
  <a href="http://example.com">
    <img src="http://placehold.it/300x200">
  </a>
  <button>AAAAA</button>
</div>

CSS

.box {
  box-sizing: content-box;
  width: 300px;
  height: 200px;
  border: thin solid black;
}

.box > a {
  display: block;
  position: absolute;
}

.box > button {
  position: absolute;
}

在CodePen上查看它：http://codepen.io/millimoose/pen/avYLjQ

该按钮将自动堆叠在前一个链接上。（这是指定的行为。）它将处理点击，然后才能传递给下面的元素。

那就是说，这个解决方案有一些缺点。你必须给容器一个固定的尺寸;它不能自动调整大小以适应其内容，因为它的内容超出了渲染流程。这也意味着除非您再次明确设置其大小，否则它们不会自动填充其父框。

如何在锚元素中单击按钮时忽略锚点

1 个答案:

HTML

CSS