ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript を使用して、ページ上のマウス カーソル位置のコードと、event_javascript スキルをトリガーしたオブジェクトを取得します。
JavaScript を使用して、ページ上のマウス カーソル位置のコードと、event_javascript スキルをトリガーしたオブジェクトを取得します。
- WBOYオリジナル
- 2016-05-16 18:39:521029ブラウズ
JavaScript を使用してマウスの位置を取得します:
コードをコピー コードは次のとおりです:
関数MousePosition(ev) {
if (ev.pageX || ev.pageY) {
return {
x: ev.pageX,
y: ev.pageY
};
}
return {
x: ev.clientX document.body.scrollLeft - document.body.clientLeft,
y: ev.clientY document.body.scrollTop - document.body. clientTop
} ;
}
document.onmousemove;
function MouseMove(ev){
ev = window.event || (ev);
}
最初に、関係なくアクティブ化される evnet オブジェクトを宣言する必要があります。動き、クリック、キーの押下など。EVNET の場合、Internet Explorer では、event はグローバル変数であり、window.event に保存されます。 Firefoxなどのブラウザの場合は、対応する関数でイベントを取得します。 document.onmousemoveにmouseMove関数を割り当てると、mouseMoveはマウス移動イベントを取得します。
ev がすべてのブラウザでイベント イベントを取得するために、「||window.event」は Firefox では機能しません。ev にはすでに値が割り当てられているためです。 MSIE では ev は空なので、 window.event を取得します。
この記事ではマウスの位置を複数回取得する必要があるため、event という 1 つのパラメーターを含む MousePosition 関数を設計しました。
MSIE およびその他のブラウザーで実行するため、500*500 のウィンドウとマウスがある場合、Firefox およびその他のブラウザーは、ドキュメントに対するマウスの位置を表すために、event.pageX およびevent.pageY を使用します。が絶対真ん中にある場合、pageX と pageY の値は両方とも 250 で、500 スクロールダウンすると、pageY は 750 になります。
MSIE はその逆で、event.clientX と events.clientY を使用して、マウスがドキュメントではなくウィンドウの位置と同等であることを示します。同じ例で、下に 500 スクロールしても clientY は 250 のままであるため、ドキュメントに関連するscrollLeft プロパティとscrollTop プロパティを追加する必要があります。最後に、MSIE のドキュメントは 0,0 から始まりませんが、通常は小さな境界線 (通常は 2 ピクセル) があり、これらの境界線のサイズも document.body.clientLeft と clientTop で定義されます。
幸いなことに、現在では、mousePosition 関数を使用して座標の問題を解決しているので、もう心配する必要はありません。
JavaScript を使用してイベントをトリガーしたオブジェクトを取得します
コードをコピーします コードは次のとおりです: