6

クリック可能、ドラッグ可能、サイズ変更可能な要素をいくつか含む div を取得しました。また、これらの可動要素を部分的に透明な (背景) 画像の背後に隠したいと考えています。Internet Exploder 以外ではすべて問題なく動作します。

私のコード（問題を引き起こす最小限のものに縮小されたもの）は次のようになります：

<div id="container" style="z-index: 200; position: absolute">
    <div style="position:absolute; width: 20px; height: 80px; background-color: red; opacity: .2"></div>
    <div id="works">not works</div>
</div>

ここにもフィドルを作成しました：http://jsfiddle.net/ZUfp5/11/

コンソールでわかるように、要素を直接クリックするとハンドラーが起動しますが、オーバーレイをクリックすると起動しません。

イベントは泡立ちませんか??

これを機能させる方法はありますか、それともインターネットエクスプローダーは再びそれを台無しにしますか?

アップデート：

問題を完全に監視できるように、フィドルを編集してFirefoxで動作するようにしました

4

2 に答える 2

3

問題はイベントのバブリングではありません。問題は、オーバーレイが「機能しないレイヤー」を隠していることです。非 SVG 要素のCSSpointer-eventsは IE9 ではサポートされていません。

#containerイベントがイベント ターゲットに到達したときは ではありません#worksが、オーバーレイ、したがって jQuery はイベントを発生させません。

ここで解決策を説明できます: http://www.vinylfox.com/forwarding-mouse-events-through-layers/

基本的に、彼はイベントをオーバーレイにバインドし、次のように処理します。

  1. 「オーバーレイを隠す」
  2. 下にある要素を見つける
  3. イベントを下の要素に転送します。

これは、それを実装する例のフォークされたフィドルです。 http://jsfiddle.net/QY69w/

イベントが「mousemove」などの場合、マウスダウン時にオーバーレイを非表示にして、マウスアップ時にのみ表示する必要があるかもしれません (直後ではなく)。

于 2013-03-11T09:40:12.987 に答える
2

ローマンの答えは正しい - +1. 以下を使用して、期待される動作を得ることができます。

position: relative;

で<div id="works">。IE9のみでテストしました。

于 2013-03-11T09:47:33.533 に答える