16

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

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

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

4

4 回答 4

25

您可以添加一个伪元素（: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.

于 2013-10-08T11:54:04.893 回答
3

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

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

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

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

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

无论哪种方式，您都希望使用带有填充的包含元素。

于 2013-10-08T11:56:36.253 回答
0

有可能，但是，它有点麻烦，因为您需要引入两个新元素，一个包装器和一个空 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区域/控件的范围，这就是您需要其他元素的原因。当然，可以检查每次点击是否在按钮范围内，但这要复杂得多。

于 2013-10-08T11:53:47.730 回答
-2

只需在按钮上应用与背景颜色相同的边框。这将产生放大按钮大小的效果，但仍然显示为您制作的大小。

于 2013-10-08T12:02:07.003 回答