Question

我正在寻找一种技术，示例或lib，用于在元素周围提供缓冲区以拾取点击和悬停事件。

具体来说，这适用于我希望拥有更大点击目标的精简分隔符。

任何想法都会很棒。唯一的要求是它不会影响页面其余部分或其他附近点击区域（最低优先级事件处理程序）的样式。

更新我就在这里：

HTML：

  <div class="box">
      Hi there
      <div class="buffer"></div>
  </div>
  <span class="test">Hi there, I should still be clickable</span>

CSS：

.box {
  position: relative;
  background: #ccc;
  height: 100px;
  line-height: 100px;
  width: 100px;
  text-align: center;
}

.box > .buffer {
  position: absolute;
  top: -10px;
  left: -10px;
  background: transparent;
  border: 1px solid;
  height: 120px;
  width: 120px;
}

JS：

var box = document.querySelector('.box');
box.onclick = function(e) {
  alert('clicked on buffer')
}

var span = document.querySelector('.test');
span.onclick = function(e) {
  alert('clicked on span')
}

JSfiddle：http://jsfiddle.net/ScSEe/

唯一剩下的问题是缓冲区会压缩附近的点击区域。

谢谢！

Answer 1

我找到了一个优雅的解决方案，但它只适用于非static定位的元素：

<div id="target" style="position:relative/* for example */; z-index:0;">
    <!-- just place this div into the target element: -->
    <div style="
      z-index:-1; /* placed directly behind parent element */
      position:absolute; /* needed for the below to work */
      top:-10px; left:-10px; bottom:-10px; right:-10px; /* around the parent */
     " />
     …
</div>

该隐形区域中的点击将被委托给父元素，即使它们发生在它之外。定位代码使“缓冲区域”总是比布局父级（最近的非静态祖先z-index）大一点，无论大小或位置（也是动画等）。

Demo at jsfiddle.net

Answer 2

如何将不可见的div元素放在比其他元素更高的z-index上以捕获这些事件？

<div id="click_region" style="z-index:1000; visibility:hidden;"></div>

$("div#click_region").click(function(){/*do yo thang*/};

Answer 3

您可以将元素放在透明div中，并将一些填充设置为分隔符区域，然后只需将单击回调附加到父级。

Answer 4

如何在伪元素之前和/或之后使用CSS ::？

聆听元素“足够接近”的事件

4 个答案: