JavaScript ウインドウのどこをクリックしてもイベント発生の方法

2021/07/05

今回は ウインドウ のどこをクリックしてもイベントを発生させる方法について説明します。
WEBページで表示している ウインドウ どこでもとは body タグの中身の全てのことになります。

そこで body タグのクリックイベントに関数を定義すればいいことになります。以下の様な宣言をページが全てロードされたタイミングで行うことになります。

document.body.onclick = function ( event ) {
    ...
}

これを使った例として以下に HTML ファイル側のソースを示します。

■bodyタグのクリックイベントに関数を定義

<html>
<head>
<meta charset="utf-8">
<title>test Event body click - 1</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function () {
    //ウインドウ内クリックでの処理
    document.body.onclick = function ( event ) {
        alert("document.body.onclick...event");
    }
});
</script>
</head>
<body>
    <h2>test Event body click - 1</h2>
	<p>ウインドウのどこをクリックしてもイベント発生</p>
</body>
</html>

これを実行しますと確かにクリックするとアラートが表示されるのですが、場所が限定されています。
h2 タグ及び p タグの上あたりでクリックする場合のみクリックイベントが発生する様です。
FireFox の開発環境の「インスペクター」タブで見てみると body の領域は縦方向に狭い領域となっています。

これは当然の結果であり body の縦方向の領域の指定が無いので p タグの領域までとなっています。
これを改善するには body の縦方向の領域の指定を行います。

■bodyタグの縦方向の領域を定義

<html>
<head>
<meta charset="utf-8">
<title>test Event body click - 2</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function () {
    //ウインドウ内クリックでの処理
    document.body.onclick = function ( event ) {
        alert("document.body.onclick...event");
    }
});
</script>
<style>
/*クラスのスタイル宣言*/
.whole{
	width: 100%;
	height: 100%;
}
</style>
</head>
<body class="whole">
    <h2>test Event body click - 2</h2>
	<p>ウインドウのどこをクリックしてもイベント発生</p>
</body>
</html>

body の縦方向の領域の指定をスタイルによりウインドウの100％と指定しましたので、ウインドウのほぼすべてでクリックイベントが発生します。

■buttonタグのクリックイベントとダブった場合について

p タグの下に button タグを置いて、そのクリックイベントと body のクリックイベントのタイミングに付いて確認します。

3個のボタンの1個をクリックすると、ボタンクリックイベントが発生した後で body のクリックイベントが発生します。

2個のイベントが連続して発生しますので、注意が必要です。

<html>
<head>
<meta charset="utf-8">
<title>test Event body click - 3</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function () {
    //ウインドウ内クリックでの処理
    document.body.onclick = function ( event ) {
        alert("document.body.onclick...event");
    }
	//ボタンクリック処理
	$('.cbutton').on('click', function( event ) {
        alert(event.currentTarget.innerText + "onclick...event");
	});
});
</script>
<style>
/*クラスのスタイル宣言*/
.whole{
	width: 100%;
	height: 100%;
}
</style>
</head>
<body class="whole">
    <h2>test Event body click - 3</h2>
	<p>ウインドウのどこをクリックしてもイベント発生</p>
	<button class="cbutton">ボタン１</button>
	<button class="cbutton">ボタン２</button>
	<button class="cbutton">ボタン３</button>
</body>
</html>

VB.NET-TIPS などプログラミングについて

■bodyタグのクリックイベントに関数を定義

■bodyタグの縦方向の領域を定義

■buttonタグのクリックイベントとダブった場合について

関連する記事

コメント