コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > onmousemove と onmouseout を使用してマウス座標を取得する js メソッド_javascript スキル

onmousemove と onmouseout を使用してマウス座標を取得する js メソッド_javascript スキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
リリース： 2016-05-16 16:06:41
オリジナル
1840 人が閲覧しました

この記事の例では、js が onmousemove と onmouseout を使用してマウス座標を取得する方法を説明します。皆さんの参考に共有してください。詳細は以下の通りです。

次の JS コードは、onmousemove イベントと onmouseout イベントの使用法を示しています。指定された領域内でマウスが移動すると、マウス座標情報が動的に表示されます。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<!DOCTYPE html>

<html>

<head>

<script>

function myFunction(e)

{

x=e.clientX;

y=e.clientY;

coor="Coordinates: (" + x + "," + y + ")";

document.getElementById("demo").innerHTML=coor

}

function clearCoor()

{

document.getElementById("demo").innerHTML="";

}

</script>

</head>

<body style="margin:0px;">

<div id="coordiv" style="width:199px;height:99px;border:1px solid"

onmousemove="myFunction(event)" onmouseout="clearCoor()"></div>

<p>Mouse over the rectangle above,

and get the coordinates of your mouse pointer.</p>

<p id="demo"></p>

</body>

</html>

ログイン後にコピー

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。

関連ラベル：
js 得る
前の記事：Webページのname属性を取得するJSメソッドimages_javascriptスキル 次の記事：ドロップダウン リストのすべての要素を表示する JS メソッド box_javascript スキル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ノード Js + JS 入力 = document.getElementById
から 1970-01-01 08:00:00
0
0
0
js addClassが機能しない
から 1970-01-01 08:00:00
0
0
0
javascript - jsコードをPythonに変換
から 1970-01-01 08:00:00
0
0
0
jsファイルのコードが見つかりません
から 1970-01-01 08:00:00
0
0
0
phpがjsを呼び出してjsの戻り値を取得する問題
から 1970-01-01 08:00:00
0
0
0
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート