JavaScript イベント学習 第 9 章 マウスイベント_JavaScript スキル

まず、どのようなマウス イベントがあるかを見てみましょう。mousedown、mouseup_and_click、dblclick、mousemove、mouseover Mouseout です。次に、イベント属性の関連ターゲット、fromElement、および toElement についても説明します。最後に、Microsoft の Mouseenter イベントと MouseLeave イベントがあります。

ブラウザの互換性の問題は、ブラウザ互換性リストで確認できます。

例
これが例です。以下の内容を理解するのに役立ちます。
mousedown、mouseup、click、dblclick はこのリンクに登録されています。下のテキストボックスで確認できます。またはダイアログボックス内で。 (原文で試してみてください: http://www.quirksmode.org/js/events_mouse.htm)
マウスダウン、マウスアップ、クリック
ユーザーが要素をクリックすると、少なくとも 3 つのイベントがトリガーされます。順序は次のとおりです:
1. ユーザーがこの要素でマウス ボタンを押したとき
2. , ユーザーがこの要素でマウス ボタンを放したとき
3. クリック。この要素でマウスダウンとマウスアップの両方が検出されたときに発生します
通常、マウスダウンとマウスアップはクリックよりも便利です。一部のブラウザでは、onclick イベント情報を読み取ることができません。また、ユーザーがマウスで特定のアクションを実行したときに、クリック イベントが続行されない場合があります。
ユーザーがリンク上でマウス ボタンを押した後、マウス ボタンを離し、離れた後にマウス ボタンを放したとします。この場合、このリンクにはマウスダウン イベントのみが含まれます。同様に、ユーザーがマウスをクリックした後にリンクに移動した場合、リンクはマウスアップのみになります。どちらの場合も、クリック イベントは発生しません。
これが問題であるかどうかは、ユーザーの行動によって異なります。ただし、クリックを絶対に発生させたい場合を除き、onmousedown/up イベントを登録する必要があります。
ポップアップ アラート ボックスを使用すると、ブラウザーはイベントとその発生回数を追跡できなくなり、混乱が生じる可能性があります。なので、それは使わないほうがいいです。
Dblclick
dblclick イベントはほとんど使用されません。これを使用する場合は、HTML 要素に onclick および dblclick イベント ハンドラーを登録しないようにしてください。両方が登録されている場合、ユーザーが何をしているかを知ることは基本的に不可能です。
つまり、ユーザーが要素をダブルクリックすると、dblclick の前に常にクリック イベントが発生します。さらに、Netscape では、2 番目のクリックは常に dblclick の前に個別に処理されます。いずれにせよ、警告ボックスは非常に危険です。
そのため、クリックと dblclick を適切に分離することで、多くの複雑な問題を回避できます。
Mousemove
mousemove イベントは正常に機能しますが、すべての Mousemove イベントを処理するには大量のシステム リソースが必要になる可能性があることに注意してください。ユーザーがマウスを 1 ピクセル移動すると、mousemove が 1 回トリガーされます。たとえ何も起こらなかったとしても、長時間かかる複雑な機能は Web サイトの効率に影響を及ぼします。特に古いマシンではすべてが遅くなります。
したがって、最善の方法は、必要なときに onmousemove イベントを登録し、使用しないときはできるだけ早く削除することです:

コードをコピー コードは次のとおりです。

element.onmousemove = doSomething;
// 後で
element.onmousemove = null;
マウスオーバーとマウスアウト
この例をもう一度見て、マウスオーバーに変更して試してください。この例では、ev3 に onmouseover のイベント ハンドラーを追加するだけです。ただし、イベントは ev3 だけでなく、ev4 または Span でもトリガーされることがわかります。 Mozilla 1.3 より前では、これはマウスがテキスト領域に入ると常にトリガーされていました。
理由はもちろんイベントのバブリングです。 ev4 でユーザーがマウスオーバー イベントをトリガーしました。この要素には onmouseover イベント ハンドラーはありませんが、ev3 にはあります。したがって、イベントが ev3 までバブルすると、プログラムが実行されます。
これらの設定は完全に正しいですが、まだ問題があります。最初の問題は目標です。マウスが ev4 に入ると仮定します:
----------------------------------------------------- -------
| これは div id="ev3" | ------
| これは div id="ev4" | | |
| ------- |
--------------------------------------- -
<--- -----: マウスの移動
このイベントの target/srcElement は ev4 です。マウスが移動したため、イベントが発生した要素です。しかし、次のようなことが起こった場合:
----------------------------------------------------- -
| これは div id="ev3" です。 |
| | -------> | --- ----
-------------------------------------- --
-------->: マウスの動き
このイベントの target/srcElement は同じです。ここでは、マウスは依然として ev4 に入ります。ただし、マウスが ev3 または SPAN からのものである場合は、異なる操作を行うことができます。したがって、マウスがどこから来たのかを知る必要があります。
relativeTarget、fromElement、toElement
W3C は、relationTarget 属性をマウスオーバー イベントとマウスアウト イベントに追加しました。マウスオーバー イベントにはマウスがどこから来たのかが含まれ、マウスアウト イベントにはマウスがどこへ行くのかが含まれます。
Microsoft には、次の情報を含む 2 つの属性もあります。
1. fromElement は、マウスが来る前の要素を参照します。マウスオーバー
の場合にさらに便利です。 2. toElement は、マウスが移動する要素を示します。マウスアウトの状況でより便利です。
最初の例では、relativeTarget/fromElement に ev3 への参照が含まれていますが、2 番目の例では SPAN です。これで、マウスがどこから来たのかがわかりました。
クロスブラウザ コード
マウスオーバーの場合にマウスがどこから来ているかを知りたい場合は、次のようにします:




コードをコピー


コードは次のとおりです。


function doSomething(e) {
if (!e) var e = window.event;

var relTarg = e.popularTarget | | e .fromElement; マウスアウトの場合にマウスがどこに行くのかを知りたい場合は、次のようにします。 code コードは次のとおりです。

function doSomething(e) {
if (!e) var e = window.event; relTarg = e.popularTarget || e .toElement;
}

レイヤーベースのナビゲーション メニューでは、マウスがレイヤーから離れるタイミングを知る必要がある場合があります。そのレイヤーを閉じることができることを確認します。そこで、このレイヤーの onmouseout のイベント ハンドラーを登録します。その後、イベント バブリングにより、マウスがいずれかのレイヤーを離れるときに onmouseout がトリガーされます。
--------------
| レイヤー |.onmouseout =

| リンク--> このマウスアウトについて知りたいです | >| ----> これについてではありません -- -->: マウスの動き 停止するもう 1 つの方法は、マウスをこのレイヤー内に移動してリンクに到達すると、ブラウザーがこのレイヤーにマウスアウト イベントを登録することです。これには当惑しますが (マウスはまだレイヤー内にあります)、どのブラウザでも問題ありません。 それでは、マウスが実際にレイヤーから離れたときにマウスアウトを発生させるにはどうすればよいでしょうか?

コードをコピー


コードは次のとおりです。

function doSomething(e) {
if (! e) var e = window.event;
var tg = (window.event) ? e.srcElement : e.target;
if (tg.nodeName != 'DIV') return; = (e .関連付け対象ターゲット) ? e.関連付け対象ターゲット : e.toElement;
while (reltg != tg && reltg.nodeName != 'BODY')
reltg= reltg.parentNode
if (reltg== tg) return ;
// マウスが実際にレイヤーを離れたときにマウスアウトが発生しました
// イベントを処理します
}


まず、マウスが離れた要素であるイベントのターゲットを取得します。ターゲットが DIV (レイヤー) でない場合、マウスは実際にはレイヤーから離れることはないため、end 関数を理解してください。
ターゲットがレイヤーの場合、マウスがレイヤーから離れたのか、レイヤー内のリンクに入ったのかを判断できません。したがって、マウスの移動先の要素であるイベントの関連ターゲット/toElement を再度確認する必要があります。
この要素を読み取り、イベントのターゲット (つまり、DIV) または BODY 要素まで DOM ツリーを上方向にたどります。
遭遇したターゲットがレイヤーの子要素である場合、マウスはレイヤーから離れていません。関数の実行を停止するだけです。
関数がすべての検証に合格すると、マウスが実際にレイヤーから離れたことを確認でき、適切なアクション (通常はレイヤーを非表示にする) を開始できます。

Mouseenter と MouseLeave
Microsoft には解決策があります。彼は 2 つの新しいイベント Mouseenter と MouseLeave を追加しました。イベントのバブリングに反応しないことを除けば、基本的にはマウスオーバーおよびマウスアウトと同じです。これらは、イベントに登録された要素をブロック全体として扱い、ブロック内で発生する
マウスオーバーやマウスアウトには反応しません。
これら 2 つのイベントも私たちの問題を解決します。これらはバインドされた要素のマウスオーバー/アウトにのみ応答します。
現在、これら 2 つのイベントは IE バージョン 5.5 以降でのみサポートされています。おそらく他のブラウザもいつかこれから学ぶでしょう。
終了
これでイベントの紹介は終わりです。幸運を！
元のアドレス: http://www.quirksmode.org/js/events_mouse.html
私の Twitter: @rehawk