DOM

HTMLElement:pointerenter イベント

 編集:2022.10.10 by T.A.

[Edge]。→

要素でポインターの座標が変化したときに発行されます。→GlobalEventHandlers:pointerenter

pointermove と pointerenter

HTML:

<SPAN id=IdTest>[ここでポインターを…<B>[B要素]</B>]</SPAN><BR>
<BR>
<SPAN id=IdTest2>[ここでポインターを…<B>[B要素]</B>]</SPAN><BR>
<SPAN id=IdLog></SPAN>

JavaScript:

function JobP1(eve){ //pointermoveイベントの処理:
  D=eve; //=[object]:[object PointerEvent]。B要素でマウスを動かして出た。
詳細 //isTrusted=[boolean]:true //pointerId=[number]:1 //width=[number]:1 //height=[number]:1 //pressure=[number]:0 //tiltX=[number]:0 //tiltY=[number]:0 //azimuthAngle=[number]:0 //altitudeAngle=[number]:1.5707963267948966 //tangentialPressure=[number]:0 //twist=[number]:0 //pointerType=[string]:mouse //isPrimary=[boolean]:true //getCoalescedEvents=[function]:function getCoalescedEvents() { [native code] } //getPredictedEvents=[function]:function getPredictedEvents() { [native code] } //screenX=[number]:447 //screenY=[number]:310 //clientX=[number]:240.5625 //clientY=[number]:235 //ctrlKey=[boolean]:false //shiftKey=[boolean]:false //altKey=[boolean]:false //metaKey=[boolean]:false //button=[number]:-1 //buttons=[number]:0 //relatedTarget=[object]:null //pageX=[number]:240.5625 //pageY=[number]:1368 //x=[number]:240.5625 //y=[number]:235 //offsetX=[number]:221.671875 //offsetY=[number]:274.59375 //movementX=[number]:0 //movementY=[number]:2 //fromElement=[object]:null //toElement=[object]:null //layerX=[number]:240 //layerY=[number]:1368 //getModifierState=[function]:function getModifierState() { [native code] } //initMouseEvent=[function]:function initMouseEvent() { [native code] } //view=[object]:[object Window] //detail=[number]:0 //sourceCapabilities=[object]:null //which=[number]:0 //initUIEvent=[function]:function initUIEvent() { [native code] } //type=[string]:pointermove //target=[object]:[object HTMLElement] //currentTarget=[object]:null //eventPhase=[number]:0 //bubbles=[boolean]:true //cancelable=[boolean]:true //defaultPrevented=[boolean]:false //composed=[boolean]:true //…
// IdTest.setPointerCapture(eve.pointerId); let E=eve.target; //イベントが起きた要素を取得。 IdLog.innerHTML=IdLog.innerHTML + E.tagName +" "; //記録表示。 } function JobP2(eve){ //pointerenterイベントの処理: DA=eve; //=[object]:[object PointerEvent]。B要素の上でマウスを動かして出た。
詳細 //isTrusted=[boolean]:true //pointerId=[number]:1 //width=[number]:1 //height=[number]:1 //pressure=[number]:0 //tiltX=[number]:0 //tiltY=[number]:0 //azimuthAngle=[number]:0 //altitudeAngle=[number]:1.5707963267948966 //tangentialPressure=[number]:0 //twist=[number]:0 //pointerType=[string]:mouse //isPrimary=[boolean]:true //getCoalescedEvents=[function]:function getCoalescedEvents() { [native code] } //getPredictedEvents=[function]:function getPredictedEvents() { [native code] } //screenX=[number]:459 //screenY=[number]:122 //clientX=[number]:252.5625 //clientY=[number]:47 //ctrlKey=[boolean]:false //shiftKey=[boolean]:false //altKey=[boolean]:false //metaKey=[boolean]:false //button=[number]:-1 //buttons=[number]:0 //relatedTarget=[object]:[object HTMLDivElement] //pageX=[number]:252.5625 //pageY=[number]:1412 //x=[number]:252.5625 //y=[number]:47 //offsetX=[number]:233.671875 //offsetY=[number]:86.59375 //movementX=[number]:0 //movementY=[number]:0 //fromElement=[object]:null //toElement=[object]:null //layerX=[number]:252 //layerY=[number]:1412 //getModifierState=[function]:function getModifierState() { [native code] } //initMouseEvent=[function]:function initMouseEvent() { [native code] } //view=[object]:[object Window] //detail=[number]:0 //sourceCapabilities=[object]:null //which=[number]:0 //initUIEvent=[function]:function initUIEvent() { [native code] } //type=[string]:pointerenter //target=[object]:[object HTMLSpanElement] //currentTarget=[object]:null //eventPhase=[number]:0 //bubbles=[boolean]:false //cancelable=[boolean]:false //defaultPrevented=[boolean]:false //composed=[boolean]:true //…
// IdTest.setPointerCapture(eve.pointerId); let E=eve.target; //イベントが起きた要素を取得。 IdLog.innerHTML=IdLog.innerHTML + E.tagName +" "; //記録表示。 } IdTest.onpointermove=JobP1; //イベント割り当て。 IdTest2.onpointerenter=JobP2; //イベント割り当て。

pointermoveElement.setPointerCapture()Element.releasePointerCapture()


テスト