jQuery event.which 属性详解 - 获取键盘和鼠标按键代码
この記事では、jQuery の `event.which` 属性について詳しく解説します。`event.which` を使用して、ユーザーが押したキーボードのキーやマウスのボタンのコードを取得する方法を学び、実際の使用例を紹介します。
1. jQuery event.which 属性とは？
`event.which` 属性は、jQuery のイベントオブジェクトのプロパティであり、イベントをトリガーしたキーボードのキーまたはマウスのボタンのコードを取得するために使用されます。 jQuery 1.3 以降、`event.which` は非推奨となりましたが、依然として広く使用されており、キーボードやマウスのイベントを処理する際に非常に役立ちます。
2. event.which の用途
`event.which` 属性は、主に次の 2 つの状況で使用されます。
- **キーボードのキーコードの取得:** keypress、keydown、keyup などのキーボードイベントでは、`event.which` は押されたキーボードのキーの ASCII 文字コードを返します。
- **マウスのボタンコードの取得:** click、mousedown、mouseup などのマウスイベントでは、`event.which` はクリックされたマウスのボタンのコードを返します。
3. event.which の戻り値
- **キーボードイベント:** `event.which` は、キーの ASCII 文字コードを返します。たとえば、Enter キーは 13、A キーは 65 を返します。
- **マウスイベント:** `event.which` は、異なるマウスボタンに対して異なるコードを返します。
- 左ボタン：1
- 中ボタン：2
- 右ボタン：3
4. event.which の使用例
以下は、`event.which` 属性を使用する例です。
例 1: Enter キーが押されたかどうかを検出する
<input type="text" id="myInput">
<script>
$("#myInput").keypress(function(event) {
if (event.which == 13) {
// ユーザーが Enter キーを押しました
// フォームの送信など、適切なアクションを実行します
alert("Enterキーが押されました！");
}
});
</script>
例 2: マウスの左クリックと右クリックを区別する
<div id="myDiv">クリックしてください</div>
<script>
$("#myDiv").mousedown(function(event) {
if (event.which == 1) {
// ユーザーがマウスの左ボタンをクリックしました
alert("左クリック！");
} else if (event.which == 3) {
// ユーザーがマウスの右ボタンをクリックしました
alert("右クリック！");
}
});
</script>
5. 代替案
`event.which` はまだ使用できますが、以下の代替案を使用することをお勧めします。
- `event.key` および `event.code`：より読みやすいキーボードキーの識別子を取得します。
- `event.button`：より信頼性の高いマウスボタン情報を取得します。詳細については、MouseEvent.button - Web API | MDN を参照してください。
6. まとめ
`event.which` 属性は、キーボードやマウスのボタンコードを取得するための簡単な方法を提供します。非推奨にはなりましたが、イベント処理を理解し、古いコードをメンテナンスするためには依然として重要です。新しいプロジェクトでは、よりモダンな代替案を使用することをお勧めします。
jQuery event.which 属性に関するQ&A
Q1: `event.which` は、すべてのブラウザでサポートされていますか？
A1: いいえ、`event.which` は、Internet Explorer 9 以前のバージョンでは完全にサポートされていません。また、jQuery 1.3 以降では非推奨となっているため、新しいプロジェクトでは、`event.key`、`event.code`、`event.button` などの代替案を使用することをお勧めします。
Q2: `event.which` と `event.keyCode` の違いは何ですか？
A2: `event.keyCode` もキーボードのキーコードを取得するために使用されますが、非推奨となっています。`event.which` は、jQuery によって正規化されたプロパティであり、異なるブラウザ間でより一貫性のある動作を提供します。ただし、`event.which` も非推奨となっているため、`event.key` や `event.code` を使用することをお勧めします。
Q3: モバイルデバイスでは、`event.which` はどのように動作しますか？
A3: モバイルデバイスでは、キーボードやマウスイベントの動作が異なる場合があります。`event.which` は、モバイルデバイスの一部のブラウザではサポートされていません。モバイルデバイスのタッチイベントを処理するには、`touchstart`、`touchmove`、`touchend` などのタッチイベントを使用することをお勧めします。