Question

没有找到任何实际的代码只是在这个方向的正确方向上。

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

我所看到的所有方法都增加了我不想做的按钮的实际尺寸，因为这会将其他元素推到一边。我唯一的另一个想法就是让任何可以确定最接近的可点击元素的点击的监听器，如果它在5-10px之内就会触发它。

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;
}

演示 http://jsfiddle.net/kq8pq/2/

Answer 2

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

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

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

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

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

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

Answer 3

然而，它可能有点麻烦，因为你需要引入两个新元素，一个包装器和一个空div（fiddle）：

HTML

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

CSS

/* 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;
}

的JavaScript

/** 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 ;) */
};

备注

无法增加button，input，video，audio等元素的有效区域超出其显示的区域/控件，这就是为什么你需要额外的元素。当然，可以检查每次点击是否在按钮范围内，但这要复杂得多。

Answer 4

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

增加按钮的可点击区域

4 个答案:

HTML

CSS

的JavaScript

备注