リプタクのもう覚えられません
Google
Web サイト内
topmemo ▶ xy座標の取得方法(IE以外)

JavaScript

xy座標の取得方法(IE以外)

firefox,safari,operaでのx,y座標の取得方法サンプル。インターネットエクスプローラーは参考元参照。

【サンプル】


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>IE以外のx,y座標取得</title>
<script type="text/javascript">
// <![CDATA[
window.onmousemove = funcOnMouseMove;
function funcOnMouseMove(myEvent){
	//firefox不可
	x = myEvent.x;
	y = myEvent.y;
	document.getElementById("idTest1").innerHTML = "x,y=" + x +  "," + y;
	
	x = myEvent.pageX;
	y = myEvent.pageY;
	document.getElementById("idTest2").innerHTML = "pageX,pageY=" + x +  "," + y;
	
	x = myEvent.clientX;
	y = myEvent.clientY;
	document.getElementById("idTest3").innerHTML = "clientX,clientY=" + x +  "," + y;
	
	//firefox不可
	x = myEvent.offsetX;
	y = myEvent.offsetY;
	document.getElementById("idTest4").innerHTML = "offsetX,offsetY=" + x +  "," + y;
	
	//opera不可
	x = myEvent.layerX;
	y = myEvent.layerY;
	document.getElementById("idTest5").innerHTML = "layerX,layerY=" + x +  "," + y;
	
	x = myEvent.screenX;
	y = myEvent.screenY;
	document.getElementById("idTest6").innerHTML = "screenX,screenY=" + x +  "," + y;
}
// ]]>
</script>
<style type="text/css">
<!--
#idTestBox1 {
	background-color: #00CCFF;
	display: block;
	position: absolute;
	z-index: 10;
	height: 200px;
	width: 200px;
	top: 10px;
	right: 10px;
}
-->
</style>
</head>
<body>
<div id="idTest1"></div>
<div id="idTest2"></div>
<div id="idTest3"></div>
<div id="idTest4"></div>
<div id="idTest5"></div>
<div id="idTest6"></div>
<div id="idTestBox1"></div>
</body>
</html>

last update 2010.12.20
参考・出典等
http://www.openspc2.org/

▲page top

topmemogalleryblogtestaboutlinksmail
Copylight(C)2008-2010 Riptac. All Rights Reserved.