今回は先週の「ボタン二度押しガード」の続きです。
先週はボタン二度押しをガードするために、「お待ちください画面」を表示する方法について記載しました。
ただ、先週のやり方だと「_blank」リンクに対応できていません。
「_blank」リンクをクリックすると「お待ちください画面」表示しっぱなしになります。
今回は、この現象を何とかすることについて調べ対処いたしました。
現象はこのような感じです。
サンプルでは、ボタンを押すと別ウィンドウでリンク先が開きますが、元画面のほうは「お待ちください画面」が表示されっぱなしで固まっています。
この現象を何とかする方法について調べました
お待ちください画面を実際に表示しているのは、Jqueryです。
今回「_blank」のリンククリックでもお待ちください画面を表示しているために現象が発生しています。
$(document).ready(function()
{
$("a").click(function()
{
$("#wait").show();
});
});$(“a”)に対してイベント発火しているため、「_blank」も発火してしまう。
これを何とかするためには、「_blank」だけ発火しないようにしなければいけません。
そんなことができるのか？
と思いましたが、ググって調べたらやり方を見つけることができました。
百聞は一見にしかず。
こちらのサンプルをご覧いただければ、「_blank」リンクをクリックしても「お待ちください画面」表示はされませんが、それ以外のリンクには「お待ちください画面」が表示されます。
いったいどうやって実現しているのでしょうか?
ソースはこちらです
<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>wait切り替え</title>
<style type="text/css">
#wait
{
color: #FFF;
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
z-index: 999999;
left: 0px;
width: 100%;
height: 100%;
display: none;
padding-top: 70px;
top: 0px;
text-align: center;
}
#wait .wak
{
font-weight: normal;
display: inline-block;
border: 1px solid #999;
line-height: 140%;
text-align: center;
font-size: 24px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
padding-top: 20px;
padding-right: 40px;
padding-bottom: 20px;
padding-left: 40px;
}
body
{
text-align: center;
}
a
{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
display: inline-block;
padding-top: 20px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 30px;
border: 1px solid #333;
color: #333;
text-decoration: none;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
a:hover
{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$("a").not("[target=_blank]").click(function()
{
$("#wait").show();
});
});
</script>
</head>
<body>
<h1>waitサンプル</h1>
<p>
「_blank」でリンクはwaitせず処理します。<br>
「_blank」出ない場合はwait処理します。
</p>
<a href="https://office-obata.com" target="_blank">外部ページへリンク</a>
<a href="05.html">内部ページへリンク</a>
<div id="wait">
<div class="wak">
<div class="icon"><img src="default.svg" width="100" height="100"></div>
<p>処理しています<br>少々お待ちください</p>
</div></div>
</body>
</html>
全体を見るとわかりにくいですが、部分的にみるとわかりやすくなります。
前回のものとほぼ同じですが、1ヶ所だけ修正しました。
その1ヶ所がこちらです。
$("a").not("[target=_blank]").click(function()
{
$("#wait").show();
});セレクタに対してnot条件を付け加えることができます
$(“a”)セレクタに対し、.not(“[target=_blank]”) を付け加えることで、_blankリンクの場合は発火しないという処理を実現しています。
プログラミング的に考えれば、if文でNOT条件を付けるようなイメージです。
今回はたったこれだけで解決できました。
not条件はこんな使い方もできました
今回は、_blankを例外化する目的でしたが、例えばこんな記述もできることがわかりました。
$("a").not("[target=_blank]").not(".sample").click(function()
{
$("#wait").show();
});意味的には、_blankとsampleクラス指定は処理しないとなります。
組み合わせ次第で、かなり複雑な条件も組めそうです。
やればできるものです
今回の Jqueryのnot処理は、まったく知らないやり方でした。
「Jquery 例外処理」でググるとtray～catchのやり方が出てきて、まずはどのキーワードでググればよいかから調べました。
イベント発火処理は「セレクタ」（$(“a”)といった表記）が起点として記述します。
なので今度は「Jquery セレクタ 例外処理」でググるとnotに関する記述がでてきました。
そこで初めて、Jqueryのnot処理を知ることができました。
今回はググる段階からつまずきましたが、ひとつひとつ地道にキーワードを変えてググることで解決することができました。
何事もすぐにあきらめず、ちょっとずつ進めていければ何とかなるという体験をいたしました。
本記事がまたお役に立てば幸いです。