Jqueryのイベント発火処理に例外条件を付け加える

今回は先週の「ボタン二度押しガード」の続きです。
先週はボタン二度押しをガードするために、「お待ちください画面」を表示する方法について記載しました。

ボタンの二度押しをwait画面でガードしてみた。

ただ、先週のやり方だと「_blank」リンクに対応できていません。
「_blank」リンクをクリックすると「お待ちください画面」表示しっぱなしになります。

今回は、この現象を何とかすることについて調べ対処いたしました。

現象はこのような感じです。

現象が発生するサンプル

サンプルでは、ボタンを押すと別ウィンドウでリンク先が開きますが、元画面のほうは「お待ちください画面」が表示されっぱなしで固まっています。

この現象を何とかする方法について調べました

お待ちください画面を実際に表示しているのは、Jqueryです。
今回「_blank」のリンククリックでもお待ちください画面を表示しているために現象が発生しています。

$(document).ready(function()
{
	$("a").click(function()
	{
		$("#wait").show();
	});
});Code language:JavaScript(javascript)

$(“a")に対してイベント発火しているため、「_blank」も発火してしまう。

これを何とかするためには、「_blank」だけ発火しないようにしなければいけません。
そんなことができるのか？

と思いましたが、ググって調べたらやり方を見つけることができました。

百聞は一見にしかず。
こちらのサンプルをご覧いただければ、「_blank」リンクをクリックしても「お待ちください画面」表示はされませんが、それ以外のリンクには「お待ちください画面」が表示されます。

いったいどうやって実現しているのでしょうか?

ソースはこちらです

<!doctype html><html><head><metacharset="shift_jis"><title></title><styletype="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><scriptsrc="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><br></p><ahref="https://office-obata.com"target="_blank">外部ページへリンク</a><ahref="05.html">内部ページへリンク</a><divid="wait"><divclass="wak"><divclass="icon"><imgsrc="default.svg"width="100"height="100"></div><p><br></p></div></div></body></html>Code language:HTML, XML(xml)

全体を見るとわかりにくいですが、部分的にみるとわかりやすくなります。

前回のものとほぼ同じですが、1ヶ所だけ修正しました。
その1ヶ所がこちらです。

$("a").not("[target=_blank]").click(function()
{
	$("#wait").show();
});Code language:JavaScript(javascript)

セレクタに対してnot条件を付け加えることができます

$(“a")セレクタに対し、.not(“[target=_blank]") を付け加えることで、_blankリンクの場合は発火しないという処理を実現しています。

プログラミング的に考えれば、if文でNOT条件を付けるようなイメージです。

今回はたったこれだけで解決できました。

not条件はこんな使い方もできました

今回は、_blankを例外化する目的でしたが、例えばこんな記述もできることがわかりました。

$("a").not("[target=_blank]").not(".sample").click(function()
{
	$("#wait").show();
});Code language:JavaScript(javascript)

意味的には、_blankとsampleクラス指定は処理しないとなります。
組み合わせ次第で、かなり複雑な条件も組めそうです。

やればできるものです

今回の Jqueryのnot処理は、まったく知らないやり方でした。
「Jquery 例外処理」でググるとtray～catchのやり方が出てきて、まずはどのキーワードでググればよいかから調べました。

イベント発火処理は「セレクタ」（$(“a")といった表記）が起点として記述します。
なので今度は「Jquery セレクタ 例外処理」でググるとnotに関する記述がでてきました。
そこで初めて、Jqueryのnot処理を知ることができました。

今回はググる段階からつまずきましたが、ひとつひとつ地道にキーワードを変えてググることで解決することができました。

何事もすぐにあきらめず、ちょっとずつ進めていければ何とかなるという体験をいたしました。

本記事がまたお役に立てば幸いです。

今回のレポートは以上です。
読んでいただいてありがとうございました。

ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。 鋭意ご対応申し上げます。
ホームページのご提案もさせていただいております

備忘録,JqueryJquery,イベント発火の例外,条件付加

Posted by OBATA