マウスの座標を取得する client screen

clientX(ブラウザX軸) : -
clientY(ブラウザY軸) : -
screenX(スクリーンX軸) : -
screenY(スクリーンY軸) : -

[ソースコード]

<script type="text/JavaScript">
window.addEventListener("load" , Start);

function Start(){
	document.addEventListener("mousemove" , mouseReport); // documentにmousemoveイベントを発生させている。
}

function mouseReport(evt){
	var client_x = document.getElementById('clientX');
	var htmlX = evt.clientX; // evtはdocumentを指している。
	client_x.firstChild.nodeValue = htmlX;
	
	var client_y = document.getElementById('clientY');
	var htmlY = evt.clientY;
	client_y.firstChild.nodeValue = htmlY;
	
	var screen_x = document.getElementById('screenX');
	var screenX = evt.screenX;
	screen_x.firstChild.nodeValue = screenX;
	
	var screen_y = document.getElementById('screenY');
	var screenY = evt.screenY;
	screen_y.firstChild.nodeValue = screenY;
}
</script>

インデックスにもどる