Javascript/event.page

解説イベント発生時に、ドキュメントの左端を基準にしたカーソル位置（座標）を格納するプロパティ

sample1

pageX:---

pageY:---

sample1code

var s1Div = document.getElementById("s1Div");
s1Div.style.width = "100%";
s1Div.style.height = "300px";
s1Div.style.background = "orange";
var x = document.getElementById("x");
var y = document.getElementById("y");
s1Div.onclick = function(e){
	var clickX = e.pageX;
	var clickY = e.pageY;
	x.innerHTML = clickX;
	y.innerHTML = clickY;
}

sample2

s2Li01
s2Li02
s2Li03

ダブルクリック

sample2code

var s2Ul = document.getElementById("s2Ul");
s2Ul.style.position = "absolute";
s2Ul.style.visibility = "hidden";
s2Ul.style.listStyle = "none";
s2Ul.style.background = "forestgreen";
s2Ul.style.padding = "10px";
document.ondblclick = function(e){
	var clickX = e.pageX;
	var clickY = e.pageY;
	s2Ul.style.left = clickX + "px";
	s2Ul.style.top = clickY + "px";
	if(document.className == "s2Class"){
		s2Ul.style.visibility = "hidden";
		document.className = "";
	} else {
		s2Ul.style.visibility = "visible";
		document.className = "s2Class";
	}
}