汎用的にcurrentTarget,target,pageX,pageYをJavaScriptのイベントでとる方法
何度やっても忘れてしまうので、自分へのメモ。JavaScriptはIEだけ、イベントが特殊なので、汎用的に扱うための方法。今、僕が欲しいのは、currentTarget, target, pageX, pageYの4つです。何かの参考にどうぞ。IEは5以降に対応してます。Firefox 3.6, Chrome 4, Safari 4, Opera 10で確認。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head><script type="text/javascript"> window.onload = function() { document.getElementById("a").onclick = function(e) { if (document.all) { e = { currentTarget : this, target : event.srcElement, pageX : event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft), pageY : event.clientY + (document.body.scrollTop || document.documentElement.scrollTop) }; } alert(e.currentTarget.tagName + " " + e.target.tagName + " " + e.pageX + " " + e.pageY); }; }; </script></head> <body> <div id="a" style="position:absolute; left:100px; top:110px"> abc<br/> (ここに、abcがたくさん。省略) abc<br/> <input type="button" value="click this"/><br/> abc<br/> (ここに、abcがたくさん。省略) abc<br/> </div> </body> </html>