pageXとは
- ここで説明する pageX とは次の語句からなるjQueryのEventObjectプロパティです。
- pageX
- 読み: ページエックス
意味: ページの水平座標
pageXプロパティの概要
この EventObject プロパティは、イベントが発生したときのマウスポインターの水平位置をピクセル単位で取得することができます。
この取得した値は、ページ上での座標となります。
構文
サンプルを見る前に構文を確認しておきます。
構文は 02 行目の部分です。 02 行目の eo は 01行目の function(eo) の イベントオブジェクトを参照しています。
$(Selector).EventMethod(function(eo){
var eventPageX = eo.pageX;
});サンプルコードと実行結果
ここでは、div 要素の mousemove イベントに関数をアタッチしておき、 イベントメソッドを実行した時に生成されるイベントオブジェクトの pageX プロパティの値を取得して表示してみます。
サンプルコード: CSS
<style>
div{
background-color: ##lightcyan;
border: thin solid ##black;
padding: 1em;
height: 200px;
width: 200px;
}
</style>
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div></div>
<script>...</script>
</body>
- 06: div (ブロックコンテナー要素です。この要素のマウスムーブイベントからイベントオブジェクトのプロパティを取得してページ上でのマウスポインターの水平位置を表示します。)
サンプルコード: script
<script>
$("div").mousemove(function(eo){
$(this).text(eo.pageX);
});
</script>
- 03: eo.pageX (イベントオブジェクトの pageX プロパティを取得しています。 この 03 行目の eo は 02 行目の function(eo) を参照しています。)