私のAJAX要求の中には、ローダーが表示されているため、ロード中にクリックしないように画面全体を暗くしています。しかし...私は実際にページをクリッピング不可能にするために何も実装していません。オーバーレイを切り替えるときドキュメント/ボディ全体をクローズしないようにする
$("#loading-overlay").toggle();
//my ajax
$("#loading-overlay").toggle();
だから、私はまた、おそらく私bodyまたはviewportは、それはそれは完全にunclickableになり、私の文書にCSSクラスを設定したい：
私のコードは、この構造を有しています。私はオンラインでチェックしてきましたが、ほとんどのソリューションはより小さいセクションを扱うようだし、より大きな機能を備えているか、古いものです。この問題を解決するにはどうしたらいいですか？
あなたが説明したことはあまり意味がありません。あなたはオーバーレイ要素でページ全体を淡色表示しましたが、ページをクリッキングできないようにしたいと言ってきました。
しかし、ページ全体をカバーする要素を使用していて、オーバーレイ効果が十分に高いZ-インデックスがある場合、オーバーレイ要素ではなくオーバーレイ要素で発射する必要がある？
body {
pointer-events: none;
}
をごpointer-events: noneを使用することができます任意のクリックを防ぐために：
要素がマウスのターゲットになることはありませんかかわらず、私はちょうどあなたが使用することができ、少し奇妙に思われる言ったの
イベント;ただし、マウスイベント は、子孫要素に ポインタイベントが他の値に設定されている場合、その子孫要素をターゲットにすることができます。このような状況では、マウス イベントは、 キャプチャ/バブルフェーズの間に、この親要素のイベントリスナーを として、子孫への/その子孫から適切なものとしてトリガーします。
pointer-events: noneも、IE 11
function showAlert() {
alert("Alert");
}body {
pointer-events: none;
}<button onclick="showAlert()">Click me</button>本当のクリックを防止しますページ全体をカバーするオーバーレイwidely supported by all main browsersです。
ユーザーがDOMからオーバーレイを簡単に削除できるという事実を忘れることなく、彼が本当にクリックしたければ。
ユーザーがタブをタップしてフォームを入力しないようにしたい場合は、フォームの送信自体をチェックする必要があります。その他のアクションでは...
最も簡単なオプションは、新しいajaxの送信を防ぐことです。これを達成するには、ajax呼び出しの進行状況を把握したグローバル変数が必要です。 $ .ajaxStartと$ .ajaxEndを使用できます。 1がすでに行われている場合もajaxSendにあなたは、どこへ行く新しい要求を防ぐことができます...のようなので、
var ajaxing = false;
$.ajaxSend(function(e, xhr) {
if(ajaxing){
xhr.abort();
}
});
$.ajaxStart(function(e, xhr) {
ajaxing = true;
});
$.ajaxEnd(function(e, xhr) {
ajaxing = false;
});
あなたは、ブロッキングとして、いくつかの要求をマークできるようにするオプションを追加することができ、そしていくつかではありません。オーバレイさえも、それらのイベントハンドラで直接トリガすることができます。
は本当に質問に答えていません – vsync
JQuery event.preventDefault()メソッドを追加する必要があります。
これは上部のdivのクリックを検出し、それ以上の操作を防止します。
$("#superdiv").click(function(event) {
event.preventDefault();
$("<body>")
.append("default " + event.type + " prevented")
.appendTo("#log");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.preventDefault demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="superdiv" style="position: absolute; top:0; left: 0; bottom:0; right: 0; z-index:10; background-color:rgba(20,20,20,0.5)"></div>
<a href="http://jquery.com">default click action is prevented</a>
<div id="log"></div>
</body>
</html>全幅と全高オーバーレイが
div#loading-overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 10;
opacity: 0.5;
background-color: #000;
}<body>
<div id="loading-overlay"></div>
<a href="#">Button</a>
</body>全部で 'pointer-events：none'はOPが必要とするもので、何らかの理由で' div'に設定された暗い背景のオーバーレイではありません。 – vsync
すべての良い行いますが、あなたの第二トグルは、AjaxのonCompleteのコールバックに追加する必要があります。 – Stavm
オーバーレイは、あなたが描いているものを正確に達成していませんか？ページ全体をカバーする要素があり、その要素にクリックハンドラがない場合は、ユーザーは何もクリックできません。 （または、より正確には、何もユーザーのクリックに反応しません。）ここでは何が機能していませんか？ – David
1つの解決策は、すべての画面（絶対位置、上部の右下の位置が0の位置）と大きなZ-インデックス –