javascript - クリック イベントの処理に関する問題

Question

私はJquery UIのサイズ変更ハンドラーを持っており、LIのセットを含むdivの上に絶対に配置されています(ここでは日付のセットです)。したがって、任意の日付をクリックすると、サイズ変更の div が LI の上にあるため、クリック イベントは伝播されません。

では、li がクリックを処理するようにするにはどうすればよいでしょうか。

JSFIDDLE - http://jsfiddle.net/svXTa/1/

Answer 1

既に述べたように、マウス イベントを中断せずに要素をクリックすることはできません。

設計を見直し、クリック ハンドラがバインドされている要素の上に要素を重ねないソリューションを選択することをお勧めします。

とにかく、現在の設定にとどまりたい場合は、サイズ変更可能な要素の下にある要素のクリック ハンドラーを呼び出すときに、サイズ変更可能な要素を壊さない私のハックなソリューションを次に示します。

$('#dgArea').click(function(e) {
    $(this).hide();
    $(document.elementFromPoint(e.pageX, e.pageY)).click();
    $(this).show();
});

フィドル

古いブラウザーではサポートされていないことに注意してください。それdocument.elementFromPointが問題になる場合は、手動で実装できます。これを行う1 つの方法を次に示します。

Answer 2

セットする

#dgArea{
  pointer-events: none;
}