jqueryを使用してオーバーレイdivをクリックできないようにする

Question

私は問題があります。私はページのメニューに半透明のdivを持っていて、そのdivをクリックしたいと思います。

有効なCSSを生成する必要があるため、CSSプロパティのポインタイベントはオプションではありません。試してみた：

event.preventDefault(); 
event.stopPropagation(); 

"bottom layer"のdivはクリックされません。ここで

簡易版で私のコードです：

<div id="menuContainer"> 
<div id="menu"> 
//here comes all the items of my menu 
</div> 
</div> 
<div id="shadow"> 
</div> 

CSS：

#menuContainer { 
position: absolute; 
top: 0px; 
z-index: 0; 
height: 200px; 
} 
#menu { 
width: 300px; 
height: 30px; 
margin: 0 auto; 
position: absolute; 
z-index: 10; 
top: 160px; 
} 
#shadow { 
position: absolute; 
z-index: 1; 
top: 150px 
height: 200px; 
} 

ちょうど私が時に必要な、私はZインデックスまたはレイアウトを変更するためのオプションではありません私は影をクリックし、クリックはメニューに "再送信"されます。

Answer 1

jQueryのclick（）関数を調べましたか？

http://api.jquery.com/click/

あなたは、最上位の要素にクリックイベントをキャッチし、以下の要素をクリックをシミュレートし、元のクリックを停止するリターンことができます。

Answer 2

あなたはこの

$('#shadow').click(function() { 
    $('#menu').trigger('click'); 
}); 

影の要素は、メニューへのクリックイベントを通過しているような何かを行うことができます。

マウスの位置もリレーする必要がある場合は、Mouse Positionチュートリアルをご覧ください。