JavaScript マウスイベントのケーススタディ

JavaScript マウスイベントのケーススタディ

マウスイベント

マウスが特定の操作を実行すると、イベント オブジェクトが生成され、イベントがトリガーされたときのマウスのすべてのプロパティが記録されます。

次のようにして、Google コンソールで MouseEvent オブジェクトを出力できます。

関数mouseDown(e){
var e = e||イベント;
コンソール.log(e)
}
window.onload = 関数 (){ 
document.getElementsByTagName('body')[0].addEventListener('mousedown',mouseDown,false)
}

印刷された MouseEvent は次のようになります。

このオブジェクトには多くのプロパティがありますが、最もよく使用されるのは offsetX、offsetY、clientX/clientY、pageX、pageY です。さまざまな属性は何に対応していますか?

以下に一般的なイベントをいくつか示します。

altkey: マウス イベントがトリガーされたときに alt キーが押されているかどうか。押されている場合は true を返し、それ以外の場合は false を返します。

button: イベント属性はアラビア数字を返します。0 は左ボタンの押下を表し、1 はスクロール ホイールの押下を表し、2 は右ボタンの押下を表します。

offsetX、offsetY: イベント属性は、イベントがトリガーされたときに、イベント ソース要素に対するマウスの X 座標と Y 座標を返します。標準イベントには対応する属性はありません。

clientX、clientY: イベント プロパティは、イベントがトリガーされたときに、ブラウザー ページ (またはクライアント領域) に対するマウス ポインターの水平座標と垂直座標を返します。

pageX、pageY: イベント属性は、イベントがトリガーされたときに、ページ全体の左上隅を基準としたマウス ポインターの水平座標と垂直座標を返します。

screenX、screenY: イベント属性は、イベントがトリガーされたときのユーザーの画面に対するマウスの位置の水平座標と垂直座標を返します。参照点、つまり原点は、画面の左上隅です。

まあ、テキストによる説明はいつも面倒なので、ここですべてを説明する古典的な画像を示します。

JavaScript マウス イベント (MouseEvent) のケース スタディに関するこの記事はこれで終わりです。JavaScript マウス イベント (MouseEvent) に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • C++ の while 文と do-while 文の詳細な説明
  • C言語ソケットペアの使用例の説明
  • C# NullReferenceException の解決ケースの説明
  • C# ExecuteScalar() メソッドのケース説明
  • C++ 基礎学習: 参照とポインタを区別する方法
  • C言語でスタックを実装する2つの方法
  • Java8 ArrayList での forEach の使用
  • C言語のOutputDebugStringとフォーマットされた出力関数OutputDebugPrintfの詳細な説明

<<:  MySQL スライディング集計/年初来集計の原理と使用例の分析

>>:  Centos8 の Django プロジェクトに nginx+uwsgi をデプロイするチュートリアル

推薦する

HTML テーブル マークアップ チュートリアル (40): ヘッダーの暗い境界線の色属性 BORDERCOLORDARK

テーブルヘッダーでは、暗い境界線の色を個別に定義できます。基本的な構文<TH 境界線の色を暗く...

HTML の rel 属性の分析

.y { background: url(//img.jbzj.com/images/o_y.pn...

MySQL の 3 つの浮動小数点型 (float、double、decimal) の違いと概要について簡単に説明します。

各浮動小数点型のストレージ サイズと範囲は、次の表に示されています。タイプサイズ範囲(符号付き)範囲...

MySQL トランザクション同時実行問題の解決

開発中にこのような問題に遭遇しましたビデオ視聴記録が 100 に更新されると、視聴されたことを意味し...

MySQL 整合性制約の定義と例のチュートリアル

目次整合性制約整合性制約の定義整合性制約の分類主キー制約単一の主キーと複合主キーの違い主キーフィール...

Vueはシンプルなショッピングカートの例を実装します

この記事では、参考までに、シンプルなショッピングカートケースを実装するためのVueの具体的なコードを...

Linux システムの /etc/fstab ファイルの詳細な解釈

序文 [root@localhost ~]# cat /etc/fstab # #/etc/fsta...

MySQLでユーザー認証情報を表示する具体的な方法

具体的な方法: 1. コマンドプロンプトを開く2. mysql -u root -pコマンドを入力し...

Reactコンポーネントをフルスクリーンにする方法

導入この記事は、 React + antdをベースにして、完全な全屏demoを紹介します。その理由は...

mysql binlog (バイナリログ) を表示する方法

たとえば、新しいテーブルを作成したり、既存のテーブルのデータを更新したりすると、これらのイベントは、...

MacでのMySQL5.7.22のインストール手順

1. インストールパッケージを使用してMySQLをインストールします(オンラインダウンロードは遅すぎ...

Linux パーティションまたは論理ボリュームにファイルシステムを作成する方法

序文システムにファイル システムを作成し、それを永続的または非永続的にマウントする方法を学習します。...

Tomcat が非同期サーブレットを実装する方法の詳細な説明

序文これまでの Tomcat シリーズの記事を通じて、私のブログを読んでいる学生は Tomcat に...

一般的な Linux ディストリビューションのミラーソース構成の概要

最近 Linux を研究していて、いくつかの Linux ディストリビューションを試してみましたが、...

純粋な CSS で DIV サスペンションを実装するサンプル コード (固定位置)

DIV フローティング効果 (固定位置) は CSS のみで実装されており、IE8、360、Fir...