javascript - pointer-events: none に設定された div の子がポインターイベントを持つことは可能ですか?

Question

pointer-events: none に設定された div の子がポインターイベントを持つことは可能ですか?

ポインタイベントが通過できるようにするために別のdivを保持するdivが必要ですが、div自体にはまだイベントがあります。

これは可能ですか？

Answer 1

はい、可能です。基本的にその方法を説明しました。親に対して無効にし、子に対して有効にします。

pointer-eventsIE11を含むほぼすべてのブラウザでサポートされています

SVG 専用pointer-events: allですのでご注意ください。

HTML の場合、サポートされている値はautoとのみです。none

.parent {
  pointer-events: none;
}

.child {
  pointer-events: auto;
}

<div class="parent">
  <a href="#">Parent</a>
  <div class="child">
    <a href="#">Child</a>
  </div>
</div>

デモ: http://jsfiddle.net/4gQkT/