JavaScriptでマウスの左ボタンが押されたかどうかを判断する方法

JavaScript では、マウスの左ボタンが押されたかどうかを判断することが一般的な要件です。マウスを使用して対話する Web アプリケーションでは、通常、ユーザーがマウスを動かしたときに左マウス ボタンが押されたかどうかをリアルタイムで監視して、後続の操作を実行できるようにしたいと考えます。この記事ではマウスの左ボタン押しの判定を実現するためのテクニックや方法を紹介します。

1. MouseEvent オブジェクトの Button プロパティを使用して、マウスの左ボタンが押されたかどうかを判断します。

マウスが移動すると、ブラウザは MouseEvent イベントをトリガーします。 MouseEvent オブジェクトには、マウスのどのボタンが現在押されているかを示す button プロパティが含まれています。マウスの左ボタンの場合、buttons 属性の値は 1 です。したがって、MouseEvent オブジェクトの Buttons プロパティが 1 に等しいかどうかを判断することで、マウスの左ボタンが押されたかどうかを判断できます。以下は簡単なサンプル コードです。

document.addEventListener('mousemove', function(event) {
  if (event.buttons === 1) {
    console.log('鼠标左键被按下了');
  }
});

2. マウスダウン イベントとマウスアップ イベントのボタン プロパティを判断して、マウスの左ボタンが押されたかどうかを判断します。

マウスが押されたときまたは ブラウザを放すと、それぞれマウスダウン イベントとマウスアップ イベントがトリガーされます。 MouseEvent オブジェクトには、どのマウス ボタンが押されたか離されたかを示す button プロパティが含まれています。マウスの左ボタンの場合、ボタン プロパティの値は 0 です。したがって、mousedown イベントとmouseup イベントの button プロパティが 0 に等しいかどうかを判断することで、マウスの左ボタンが押されたかどうかを判断できます。以下はサンプル コードです:

document.addEventListener('mousedown', function(event) {
  if (event.button === 0) {
    console.log('鼠标左键被按下了');
  }
});

document.addEventListener('mouseup', function(event) {
  if (event.button === 0) {
    console.log('鼠标左键被释放了');
  }
});

上記のサンプル コードでは、mousedown イベントとmouseup イベントをそれぞれリッスンしていることに注意してください。これは、マウスの左ボタンが押されると、mousedown イベントがトリガーされ、マウスの左ボタンが放されると、mouseup イベントがトリガーされるためです。

3. グローバル変数またはクロージャを使用して、マウスの左ボタンが押された状態を保存します。

場合によっては、長期間保存する必要がある場合があります。マウスの左ボタンをクリックし、これに基づいていくつかの操作を実行します。このとき、グローバル変数またはクロージャを使用して、マウスの左ボタンが押された状態を保存できます。以下はサンプル コードです:

var isMouseDown = false;

document.addEventListener('mousedown', function(event) {
  if (event.button === 0) {
    isMouseDown = true;
  }
});

document.addEventListener('mouseup', function(event) {
  if (event.button === 0) {
    isMouseDown = false;
  }
});

document.addEventListener('mousemove', function(event) {
  if (isMouseDown) {
    console.log('鼠标左键被按下了');
    // 进行一些操作
  }
});

上記のサンプル コードでは、マウスの左ボタンが押された状態をグローバル変数 isMouseDown を通じて保存します。マウスの左ボタンが押されると、isMouseDown が true に設定され、マウスの左ボタンが放されると、isMouseDown が false に設定されます。マウス移動イベントのリスニング関数では、isMouseDownがtrueの場合のみ一部の操作が実行されます。

概要

JavaScript では、マウスの左ボタンが押されたかどうかを判断することが一般的な要件です。この記事では、マウスの左ボタンが押されたかどうかを判断する 3 つのテクニックと方法を紹介します。具体的には、この機能は、MouseEvent オブジェクトの Button プロパティ、mousedown イベントと Mouseup イベントの button プロパティ、またはグローバル変数またはクロージャを使用してマウスの左ボタンが押された状態を保存することによって実現できます。実際の開発では、特定のニーズに応じて、対応する技術や手法を選択して使用できます。

以上がJavaScriptでマウスの左ボタンが押されたかどうかを判断する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。