基礎となるdivをクリッキングできないようにするには？

Question

私は、オーバーレイのdivをした：基本的に私は私のページ全体をカバーするために、このオーバーレイのdivをしたい

position: absolute; top: 0; left: 0; widht: 100%; height: 100%; 

。そしてそれは私が必要とすることをしますが、私はまた、基になるdivがunclickableである必要があります。 FF、Safari、Chromeでしかないのは確かです。 IEとOperaでは、あなたはまだ下にあるボタンをクリックすることができます。

誰も私がどのようにこの "unclickable基本的な動作"を達成することができますか？

Answer 1

オーバーレイdivのonclickハンドラを追加します。

Answer 2

また、新しいdivが他のすべての上にあるようにするには、z-indexを使用する必要があります。この属性がないと、あなたは1つが上になるとonclickの

はまた、入力種別の選択がzインデックス

Answer 3

を無視することが知られてIE（旧バージョン）のバグを認識して受信するという点で、ブラウザのなすがままにされています

あなたはjQueryのようなものを使用している場合は、

$("a:not(.overlay)").click(function(e) { e.preventDefault(); }); 
$("input:not(.overlay)").click(function(e) { e.attr("disabled", "disabled"); }); 

あなたのオーバーレイ（リンク、ボタンなど）オーバーレイクラス内のすべてをあげるような何かを行うことができ、これは効果的に他の上のすべてを無効にしますあなたのページ。

Answer 4

と間に合わオーバーレイCSS：

z-index: 10000; 

はそれの世話をします。

Answer 5

これは簡単にはJavaScriptを使用して行うことができます。

• 高Zインデックス
• でページ全体をマスキングdiv要素を作成します。マスクを除去すると、すべてのクリック
• マスクキャッチを作り、ページ再びクリック可能になります。

このアプローチはもちろん、身体だけでなくすべてのdom要素で使用できます。ここ

var mask = $('<div></div>') 
    .css({ 
    position: 'absolute', 
    width: '100%', 
    height: '100%', 
    top: 0, 
    left: 0, 
    'z-index': 10000 
    }) 
    .appendTo(document.body) 
    .click(function(event){ 
    event.preventDefault(); 
    return false; 
    }) 

ワーキングサンプル：http://jsfiddle.net/GTPW3/3/

Answer 6

.class {pointer-events: none;}