DOM

インターフェイス

Element:mouseleave イベント

 編集:2022.09.28 by T.A.

[Edge]。→mdnmdn(en-US)

ポインティング デバイス(ふつうはマウス)のカーソルが要素(Element)の外に移動したときに発行されます。

バブリング なし
キャンセル 不可
インターフェイス MouseEvent
イベント ハンドラー プロパティ onmouseleave

mouseleave と mouseout はよく似ていますが、 mouseleave はバブリングしないのに対して mouseout はバブリングするという点が異なります。すなわち mouseleave はポインターがその要素およびすべての子孫を出たときに発行されるのに対し、mouseout はポインターがその要素またはその要素の子孫のうちの一つを出たときに(ポインターがまだその要素内にあったとしても)発行されます。

¶省く

mouseleave と mouseout

HTML:

<SPAN id=IdTest>[SPAN要素。ここでマウスを操作してください…<B>[B要素]</B>テキスト<INPUT value="INPUT要素">]</SPAN><BR>
<BR>
<SPAN id=IdTest2>[SPAN要素。ここでマウスを操作してください…<B>[B要素]</B>テキスト<INPUT value="INPUT要素">]</SPAN><BR>
<SPAN id=IdLog></SPAN><BR>
<SPAN id=IdLog2></SPAN><BR>

JavaScript:

function Job(eve){ //mouseleaveイベントの処理:
  D=eve; //=[object]:[object MouseEvent]。B要素の所を縦に通過してみました。
詳細 //isTrusted=[boolean]:true //screenX=[number]:666 //screenY=[number]:238 //clientX=[number]:459 //clientY=[number]:163 //ctrlKey=[boolean]:false //shiftKey=[boolean]:false //altKey=[boolean]:false //metaKey=[boolean]:false //button=[number]:0 //buttons=[number]:0 //relatedTarget=[object]:[object HTMLDivElement] //pageX=[number]:459 //pageY=[number]:1541 //x=[number]:459 //y=[number]:163 //offsetX=[number]:441 //offsetY=[number]:199 //movementX=[number]:0 //movementY=[number]:0 //fromElement=[object]:[object HTMLSpanElement] //toElement=[object]:[object HTMLDivElement] //layerX=[number]:459 //layerY=[number]:1541 //getModifierState=[function]:function getModifierState() { [native code] } //initMouseEvent=[function]:function initMouseEvent() { [native code] } //view=[object]:[object Window] //detail=[number]:0 //sourceCapabilities=[object]:[object InputDeviceCapabilities] //which=[number]:0 //initUIEvent=[function]:function initUIEvent() { [native code] } //type=[string]:mouseleave //target=[object]:[object HTMLSpanElement] //…
let E=eve.target; //イベントがあった要素の取得。 IdLog.innerHTML=E.tagName +":pageX:"+ eve.pageX +"、:pageY"+ eve.pageY; IdLog2.innerHTML=IdLog2.innerHTML+"●"; //イベントが起こるたびに記録する。 } function Job2(eve){ //mouseoutイベントの処理: DA=eve; //=[object]:[object MouseEvent]。B要素の所を縦に通過してみました。
詳細 //isTrusted=[boolean]:true //screenX=[number]:666 //screenY=[number]:284 //clientX=[number]:459 //clientY=[number]:209 //ctrlKey=[boolean]:false //shiftKey=[boolean]:false //altKey=[boolean]:false //metaKey=[boolean]:false //button=[number]:0 //buttons=[number]:0 //relatedTarget=[object]:[object HTMLDivElement] //pageX=[number]:459 //pageY=[number]:1587 //x=[number]:459 //y=[number]:209 //offsetX=[number]:441 //offsetY=[number]:245 //movementX=[number]:0 //movementY=[number]:0 //fromElement=[object]:[object HTMLElement] //toElement=[object]:[object HTMLDivElement] //layerX=[number]:459 //layerY=[number]:1587 //getModifierState=[function]:function getModifierState() { [native code] } //initMouseEvent=[function]:function initMouseEvent() { [native code] } //view=[object]:[object Window] //detail=[number]:0 //sourceCapabilities=[object]:[object InputDeviceCapabilities] //which=[number]:0 //initUIEvent=[function]:function initUIEvent() { [native code] } //type=[string]:mouseout //target=[object]:[object HTMLElement] //…
let E=eve.target; //イベントがあった要素の取得。 IdLog.innerHTML=E.tagName +":pageX:"+ eve.pageX +"、:pageY"+ eve.pageY; IdLog2.innerHTML=IdLog2.innerHTML+"●"; //イベントが起こるたびに記録する。 } IdTest.onmouseleave=Job; IdTest2.onmouseout=Job2;

テスト
HTML:


ここにHTMLが表示される
スクリプト組み込み:
JavaScript:


JavaScript:



表示内容:
表示内容: