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

Question

I'm looking for a technique, example or lib for providing a buffer area around an element to pick up click and hover events.

Specifically this is for a thin separator that I want to have a larger click target.

Any thoughts would be great. The only requirement is that it cannot affect the style of the rest of the page or other nearby click regions (lowest priority event handler).

---

Update This is where I'm at:

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/

Only remaining issue is that the buffer squelches nearby click regions.

Thanks!

Answer 1

I found an elegant solution, however it only works with non- static -positioned elements:

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

Clicks in that invisble area will get delegated to the parent element, even when they happened outside it. The positioning code makes the "buffer area" always be a little bigger than the layout parent (closest non-static ancestor with z-index ), no matter of size or position (also when animated etc).

Demo at jsfiddle.net

Answer 2

How about putting an invisible div element at a higher z-index than the rest of the elements to catch these events?

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

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

Answer 3

您可以将元素放置在透明的div中，并设置一些填充作为分隔符区域，然后将click回调附加到父对象。

Answer 4

如何使用CSS :: before和/或:: after伪元素？