增加按钮的可点击区域

Question

不是在寻找任何实际代码，只是在正确方向上的一个点。

无论如何增加按钮的目标区域但不增加它的大小？例如，我可以有效地在按钮周围添加一个 5-10 像素的区域，该区域仍然算作单击按钮。

我见过的所有方法都会增加按钮的实际大小，我不想这样做，因为这会将其他元素推到位。我唯一的其他想法是让任何点击都可以确定最接近的可点击元素的监听器，如果它在 5-10px 以内则触发。

原文由 Quince 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以添加一个伪元素（ :after / :before ），但要小心，因为两个附近的链接可能会以这种方式重叠..

 <a href="your-link-here" class="big-link">some link text</a>

和

a.big-link{position:relative;}
a.big-link:before{
    position:absolute;
    content:'';
    top:-10px;
    right:-10px;
    left:-10px;
    bottom:-10px;
}

演示：

 a {
  position: relative;
  z-index: 50;
}

a:before {
  position: absolute;
  content: '';
  top: -10px;
  right: -10px;
  left: -10px;
  bottom: -10px;
  outline: 1px solid red;
  z-index: 40;
}

 This is some text <a href="#">with a link</a> and <br> other stuff to check if they get pushed around<br> by the size of the link.

原文由 Gabriele Petrioli 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我不建议尝试增加按钮的可点击区域。如果按钮太小，您可能应该增加整个按钮的大小。触摸设备非常擅长帮助用户点击非常小的按钮。

但是，如果您有一个有意义的用例，那么您可以：

1. 将按钮放在一个具有 5-10px 填充的 div 中，然后为 div 分配一个点击处理程序，该 div 依次触发它包含的按钮上的点击处理程序。

或更简洁的解决方案 - 如果您可以更改当前的按钮样式并单击逻辑：

1. 给按钮一个没有背景或边框和 5-10px 填充的样式，然后在它里面创建一个像原始按钮一样样式的 div。

无论哪种方式，带填充的包含元素都是您想要使用的。

原文由 Luke Sargeant 发布，翻译遵循 CC BY-SA 3.0 许可协议