0

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

具体来说，这是针对我想要更大的点击目标的细分隔符。

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

更新这是我所在的位置：

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/

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

谢谢！

4

4 回答 4

3

我找到了一个优雅的解决方案，但它只适用于非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）大一点，无论大小或位置（也包括动画等）。

jsfiddle.net 上的演示

于 2012-12-13T16:53:27.923 回答
2

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

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

$("div#click_region").click(function(){/*do yo thang*/};
于 2012-12-13T16:37:08.623 回答
0

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

于 2012-12-13T16:41:02.000 回答
0

使用 CSS ::before 和/或 ::after 伪元素怎么样？

于 2012-12-13T17:21:03.450 回答