javascript - Listen to events "close enough" to the element

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

私はエレガントな解決策を見つけましたが、それは配置されていない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 のデモ

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 ::before および/または ::after 疑似要素を使用するのはどうですか?