DOM

：

：

Element：mouseleave イベント

　編集：2022.09.28 by T.A.

[Edge]。→、

ポインティング デバイス（ふつうはマウス）のカーソルが要素（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;
テスト