JavaScript | Shiftを押しながらのイベントを実装する方法

2022-02-06JavaScript イベント,JavaScript

JavaScript | Shiftを押しながらのイベントを実装する方法

JavaScriptのaddEventListener()を使ってShiftキーを押しながらクリックやエンターキーが押された際に発火するイベントの実装方法を紹介しています。

ここでの動作サンプルは紹介しているスクリプトをまとめて設置してあります。
動作テストのコードではいずれかのキーアップ時にログ表示用のテキストを消す処理が入っています。

また、動作サンプルの都合上、documentに対してイベントを実装していますが、クリック関連など必要に応じてHTML要素を対象にして下さい。

See the Pen JavaScript | Checkbox Event by yochans (@yochans) on CodePen.

Shiftキーが押されているかどうかを判別する

引数で取得できるイベントの情報から「shiftKey」でShiftキーが押されているかどうかを判別可能です。

「event.shiftKey」がtrueまたはfalseかを判別しています。

Shiftを押しながら左クリックのイベント

Shiftを押しながらの左クリックイベントのサンプルコードです。

addEventListener()にて左クリックを検出するには「click」を指定します。

document.addEventListener(`click`, () => {
	if (event.shiftKey) {
		console.log(`Shift + Click`);
	}
});

Shiftを押しながらダブルクリックのイベント

Shiftを押しながらのダブルクリックが押された場合をトリガーにしたイベントの実装サンプルコードです。

addEventListener()にてダブルクリックを検出するには「dblclick」を指定します。

document.addEventListener(`dblclick`, () => {
	if (event.shiftKey) {
		console.log(`Shift + Double Click`);
	}
});

Shiftを押しながら右クリックのイベント

Shiftを押しながらの右クリックイベントを実装するサンプルコードです。

addEventListener()にて右クリックを検出するには「contextmenu」を指定します。

コンテキストメニューを非表示にしたい場合、preventDefault()を追記します。
関連：JavaScript | 右クリックを禁止（コンテキストメニュー非表示）にする | ONE NOTES

document.addEventListener(`contextmenu`, () => {
	if (event.shiftKey) {
		event.preventDefault();
		console.log(`Shift + Right Click`);
	}
});

Shiftを押しながらマウスホイールのイベント

Shiftを押しながらのマウスホイールの操作を検出するイベントのサンプルコードです。

addEventListener()にてマウスホイールの操作を検出するには「wheel」を指定します。

ホイールの向きや量を取得したい場合は、以下の記事が参考になるかと思います。

// Shift + mouse wheel
document.addEventListener('wheel', () => {
		console.log(`mouse wheel`);
});

Shiftを押しながらEnterのイベント

Shiftを押しながらのEnterキーの入力をトリガーにしたイベントのサンプルコードです。

サンプルコードでは、動作テスト向けに「keydown」を使っていますが、「keyup」の方が多くの場面で求められる処理になると思います。

addEventListener()にてEnterキーの入力を検出するには「keydown」や「keyup」にてキーの入力をトリガーにしてキー名を取得指定します。
押されたキーの種別は「code」や「key」「keyCode」にて取得可能です。

document.addEventListener('keydown', () => {
	if (event.shiftKey && e.key === 'Enter') {
		console.log(`Shift + Enter`);
	}
});

Shiftを押しながらAキーのイベント

Shiftを押しながら例えばAキーが押された場合のイベントサンプルコードです。

addEventListener()にて例えばAキーの入力を検出するには「keydown」や「keyup」にてキーの入力をトリガーにしてキー名を取得指定します。
押されたキーの種別は「code」や「key」「keyCode」にて取得可能です。

Aキーの場合、以下の形式でキーの種類を取得可能です。

  • code：keyA
  • key：A
  • keyCode：65
document.addEventListener('keydown', () => {
	if (event.shiftKey && event.key === 'A') {
		console.log(`Shift + A`);
	}
});

Shiftを押しながらいずれかのキーのイベント

Shiftを押しながらいずれのキーが押された場合のイベントを実装するサンプルコードです。

addEventListener()にてキーボードの入力を検出するには「keydown」や「keyup」にてキーの入力をトリガーに実装して、引数から押されたキー名を取得指定します。

サンプルコードでは、動作テスト向けに「keydown」を使っていますが、「keyup」の方が多くの場面で求められる処理になると思います。

押されたキーの種別は「code」や「key」「keyCode」にて取得可能です。
各キーの種類は以下の形式でキーの種類を取得可能です。

  • code：keyAやkeyZなど
  • key：AやZなど
  • keyCode：キーに割り振られている番号
document.addEventListener('keydown', () => {
	if (event.shiftKey) {
		console.log(`Shift + ${event.key}`);
	}
});

JavaScript イベント,JavaScript

Posted by Yousuke.U