增加按钮的可点击面积

Question

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

是否要增加按钮的目标区域，而不是增加它的大小？例如，我是否可以有效地在按钮周围添加一个5-10 as区域，该区域仍将被计算为单击按钮。

我看到的所有方法都增加了按钮的实际大小，但我不想这样做，因为这会将其他元素推到不合适的位置。我唯一的其他想法是有一个侦听器的任何点击，可以确定最近的可点击元素，如果它在5-10‘s，让它启动。

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.

​

Answer 2

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

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

1)将按钮放置在一个填充为5-10px的div中，然后将一个单击处理程序分配给div，该div将触发其包含的按钮上的单击处理程序。

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

2)给按钮一个没有背景或边框的样式和5-10 no填充，然后在其内部创建一个div，样式类似于原始按钮。

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

Answer 3

但是，这可能有点麻烦，因为您需要引入两个新元素，一个包装器和一个空div (小提琴)：

​

/** instead of getting the element by class name, you should
 * get it by ID, so you can do the right action for the right button
 */
document.getElementsByClassName("click-catcher")[0].onclick = function() {
  alert("catched!"); /** you should do something better ;) */
};

/* make it possible to position the catcher */

.button-wrapper {
  position: relative;
}


/* place the button in the foreground */

.button-wrapper>button {
  position: relative;
  z-index: 2;
}


/* give the catcher +1em on all sites*/

.click-catcher {
  position: absolute;
  top: -1em;
  left: -1em;
  right: -1em;
  bottom: -1em;
}

<div class="button-wrapper">
  <div class="click-catcher"></div>
  <!-- this will be styled with CSS -->
  <button>I'm the button :)</button>
</div>

​

备注

不可能在显示区域/控件之外增加元素的活动区域，如button、input、video、audio等，这就是为什么需要额外的元素。当然，每一次点击都可以检查它是否在按钮的范围内，但是这要复杂得多。