pointerenter ( onpointerenter )イベント

　pointerenter ( onpointerenter )イベントは、ポインターがエレメントの領域上に入ったら発生するイベントです。
　このイベントにバブリング機能がありませんので、子エレメント上で発生した pointerenter イベントが改めて当該エレメントで捉えられることはありません。そのために子エレメントも領域内にみえます。
　タッチデバイスではエレメントをタッチする（ポインターがエレメントの領域にある）と発生します。

pointerenter イベントを追加（ onpointerenter イベントハンドラーとして追加）

document.getElementById('example').addEventListener("pointerenter", (event)=>{
	console.log( 'event type : ' + event.type );
});

詳しくは Example を参照してください

　似たイベントに pointerover イベントがあります。このイベントにはバブリング機能があります。

　pointerenter ( onpointerenter )イベントは、ポインターイベントの１つです。ポインターイベントは、マウス、タッチデバイス、ペンといったポインターに関する入力デバイスのためのイベントです。

- ad -

座標の取得

　座標の取得には以下の４つの方法があります。

座標の基準	プロパティ名
スクリーンデバイスの左上端	event.screenX、event.screenY
ブラウザの表示エリアの左上端	event.clientX、event.clientY
ドキュメントの左上端	event.pageX、event.pageY
エレメントの左上端	event.offsetX、event.offsetY

構文（Syntax）

　HTMLPreElement にイベントハンドラーを定義する方法には以下があります。

in HTML

<tagelement onpointerenter ="function(); ...;">

in JavaScript

object.onpointerenter  = function(){... };

addEventListener()

　関数の呼び出し。関数名のみ使用で、event 以外の引数が渡せない。

object.addEventListener("pointerenter ", function_name);

　スクリプトを直接記述する方法。スクリプトから関数を呼び出せる。

object.addEventListener("pointerenter ", ()=>{ ... },false);
// または
object.addEventListener("pointerenter ",function(){ ... },false);

　イベントについてはEventを参照してください。イベントの監視についてはEventTargetが担っています。

備考（Remarks）


Bubbles	No
Cancelable	No
Interface	Event
Supported HTML Elements	全般

Example

　pointerenter ( onpointerenter )イベントの例です。

　pointerenter イベントではポインターが領域の中に入るとイベントが発生します。バブリング機能がありませんので子エレメントで pointerenter イベントが発生しても親エレメントでそのイベントは発生しません。
　そのために、子エレメントで改めて pointerenter イベントは発生しません。

　似たイベントに pointerover があります。このイベントは子エレメントで改めて pointerover イベントが発生します。

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。

HTML内容

CSS内容

Script内容