JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのctrlKeyマウスイベントとは？役割と使い方をサンプルコード付きで解説

JavaScriptのctrlKeyは、MouseEventオブジェクトが持つプロパティの一つです。マウスボタンがクリックされた瞬間に、キーボードのCtrlキーが押されていたかどうかを判定するために使用されます。

このプロパティは真偽値（Boolean）を返します。Ctrlキーが押されていればtrue、押されていなければfalseを返します。「Ctrlキーを押しながらクリックした場合にだけ特定の処理を行う」といったインタラクションを実装したいときに非常に便利です。

ctrlKeyの実装例

以下のコードは、マウスクリック時にCtrlキーが押されているかどうかを判定し、その結果をアラートで表示するシンプルなサンプルです。

<!DOCTYPE html>
<html>
   <body onmousedown="funcCtrlKey(event)">
      <div>Ctrlキーを押しながら、ここをクリックしてください。</div>
      <script>
         function funcCtrlKey(event) {
            if (event.ctrlKey) {
               alert("CTRLキー: 押されています");
            } else {
               alert("CTRLキー: 押されていません");
            }
         }
      </script>
   </body>
</html>

コードのポイント

  • onmousedown属性：body要素に設定することで、ページ内のどこでマウスボタンが押されてもfuncCtrlKey関数が呼び出されます。
  • event.ctrlKey：発生したイベントオブジェクトから、Ctrlキーの押下状態を取得します。
  • 条件分岐：Ctrlキーが押されていれば「CTRLキー: 押されています」、そうでなければ「CTRLキー: 押されていません」とアラート表示されます。

あわせて覚えたい修飾キーのプロパティ

ctrlKeyと同様に、MouseEventには他の修飾キーの状態を取得できるプロパティも用意されています。

  • shiftKey：Shiftキーが押されているかどうか
  • altKey：Altキー（MacではOptionキー）が押されているかどうか
  • metaKey：Metaキー（MacではCommandキー、WindowsではWindowsキー）が押されているかどうか

これらのプロパティを組み合わせることで、「Shift＋クリックで範囲選択」「Ctrl＋クリックで複数選択」のような、本格的なアプリケーションで使われるマウス操作を柔軟に実装できます。

  1. JavaScriptのscreenXマウスイベントとは？役割と使い方を実例で解説

    マウスイベントが発生したとき、screenXプロパティは、画面（スクリーン）の左上を基準としたマウスポインタのX座標（水平方向の位置）をピクセル単位で返します。 screenXとscreenYの基本的な役割 イベントオブジェクトが持つscreenXは水平方向（X座標）、screenYは垂直方向（Y座標）を表します。この2つはブラウザウィンドウやWebページではなく、ユーザーの物理的な画面全体を基準にした座標を返す点が大きな特徴です。 似た用途の座標プロパティと比較すると、違いがより明確になります。 screenX / screenY：モニター画面全体を基準とした座標 clientX / cl

  2. 【JavaScript】キーボードイベントのaltKeyプロパティとは？役割と使い方を解説

    altKeyプロパティとはJavaScriptのaltKeyプロパティは、キーボードイベントが発生した瞬間にAltキー（MacではOptionキー）が押されていたかどうかを判定するためのプロパティです。このプロパティは真偽値（Boolean）を返します。true … イベント発生時にAltキーが押されていたfalse … Altキーは押されていなかった関連する修飾キーのプロパティaltKeyと同じ仕組みで、他の修飾キーの状態も取得できます。組み合わせて使うことで、より柔軟なキーボード操作の判定が可能になります。ctrlKey … Ctrlキーの状態shiftKey … Shiftキーの状態me