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

JavaScriptのshiftKeyプロパティとは？マウスイベントでの役割と使い方を解説

shiftKeyプロパティとは

JavaScriptのshiftKeyは、マウスイベントで利用できるプロパティの一つです。マウスボタンがクリックされたときに、キーボードのSHIFTキーが同時に押されていたかどうかを判定するために使われます。

このプロパティは真偽値（boolean）を返します。

  • true：マウスクリック時にSHIFTキーが押されていた場合
  • false：SHIFTキーが押されていなかった場合

たとえば、「SHIFTキーを押しながらクリックしたときだけ特別な処理を実行したい」といった場面で活用できます。

実装例

以下のコードでは、画面上でマウスをクリックするとonmousedownイベントが発生し、その時点でSHIFTキーが押されているかどうかをevent.shiftKeyで判定してアラート表示します。

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

動作のポイント

  • ページ内の任意の場所でマウスボタンを押すと、funcShiftKey関数が呼び出されます。
  • SHIFTキーを押しながらクリックした場合は「押されています」、押さずにクリックした場合は「押されていません」というアラートが表示されます。
  • 判定にはイベントオブジェクト（引数event）のshiftKeyプロパティを使用しています。

類似の修飾キープロパティ

shiftKeyと同じように、他の修飾キーの状態もマウスイベントから取得できます。

  • ctrlKey：CTRLキーの状態を取得
  • altKey：ALTキーの状態を取得
  • metaKey：METAキー（MacのCommandキーなど）の状態を取得

これらのプロパティを組み合わせることで、ユーザーのキー操作に応じた柔軟なインタラクションを実装できます。

  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