イベント発生時のマウスカーソルの位置
イベントハンドラについて調べていたときに気づいたことがあって、ついでなので、そっちも調べてみた。
何かというと、マウスイベントが発生したときには当然マウスカーソルの位置を得ることができるが、キーイベントが発生したときにもマウスカーソルの位置を得ることができるブラウザがあったらしい。
調査対象は前回とほぼ同様なのだが、一応ちゃんと書く。Firefoxが3.6.11に上がっている。
使用したコードは次のとおり。
<html> <head> <script type="text/javascript" src="mouse-event.js"></script> <script type="text/javascript" src="user-agent.php"></script> <script type="text/javascript"> document.onkeydown = defineFunction('document.onkeydown '); document.onclick = defineFunction('document.onclick '); </script> </head> <body> <pre id="msg"></pre> <pre id="user-agent"></pre> </body> </html>
mouse-event.js。
function log(msg) { var elem = document.getElementById('msg'); elem.appendChild(document.createTextNode(msg)); elem.appendChild(document.createElement('br')); } function dumpAsKeyMouseEvent(name, ev) { log(name + ': ' + ev); if (ev) { log(name + ': keyCode: ' + ev.keyCode); log(name + ': (x, y): ' + '(' + ev.x + ', ' + ev.y + ')'); log(name + ': (clientX, clientY): ' + '(' + ev.clientX + ', ' + ev.clientY + ')'); } } function defineFunction(description) { var desc = description; return function(ev) { if (!ev) { // イベントオブジェクトが引数に渡されるブラウザでは、ここを通らない ev = event; } try { dumpAsKeyMouseEvent(desc + ': ' + 'ev', ev); } catch (e) { log(desc + ': ' + 'ev: Exception: ' + e.message); } }; }
実行結果は次のとおり。
- Firefox 3.6.11
document.onkeydown : ev: [object KeyboardEvent] document.onkeydown : ev: keyCode: 38 document.onkeydown : ev: (x, y): (undefined, undefined) document.onkeydown : ev: (clientX, clientY): (undefined, undefined) document.onclick : ev: [object MouseEvent] document.onclick : ev: keyCode: undefined document.onclick : ev: (x, y): (undefined, undefined) document.onclick : ev: (clientX, clientY): (479, 61)
- Safari 5.0.2
document.onkeydown : ev: [object KeyboardEvent] document.onkeydown : ev: keyCode: 38 document.onkeydown : ev: (x, y): (undefined, undefined) document.onkeydown : ev: (clientX, clientY): (undefined, undefined) document.onclick : ev: [object MouseEvent] document.onclick : ev: keyCode: 0 document.onclick : ev: (x, y): (407, 182) document.onclick : ev: (clientX, clientY): (407, 182)
- IE 8.0
document.onkeydown : ev: [object] document.onkeydown : ev: keyCode: 38 document.onkeydown : ev: (x, y): (400, 197) document.onkeydown : ev: (clientX, clientY): (400, 197) document.onclick : ev: [object] document.onclick : ev: keyCode: 0 document.onclick : ev: (x, y): (400, 197) document.onclick : ev: (clientX, clientY): (400, 197)
- Chrome 6.0
document.onkeydown : ev: [object KeyboardEvent] document.onkeydown : ev: keyCode: 38 document.onkeydown : ev: (x, y): (undefined, undefined) document.onkeydown : ev: (clientX, clientY): (undefined, undefined) document.onclick : ev: [object MouseEvent] document.onclick : ev: keyCode: 0 document.onclick : ev: (x, y): (459, 189) document.onclick : ev: (clientX, clientY): (459, 189)
- Opera 10.63
document.onkeydown : ev: [object KeyEvent] document.onkeydown : ev: keyCode: 38 document.onkeydown : ev: (x, y): (undefined, undefined) document.onkeydown : ev: (clientX, clientY): (undefined, undefined) document.onclick : ev: [object MouseEvent] document.onclick : ev: keyCode: 0 document.onclick : ev: (x, y): (470, 106) document.onclick : ev: (clientX, clientY): (470, 106)
- Sleipnir 2.9.4
document.onkeydown : ev: [object] document.onkeydown : ev: keyCode: 38 document.onkeydown : ev: (x, y): (405, 150) document.onkeydown : ev: (clientX, clientY): (405, 150) document.onclick : ev: [object] document.onclick : ev: keyCode: 0 document.onclick : ev: (x, y): (405, 150) document.onclick : ev: (clientX, clientY): (405, 150)
IE 8.0とSleipnir 2.9.4では、キーボードのキーを打ったときに、キーイベントオブジェクトからマウスカーソルの位置を得ることができるらしい。
Firefoxでは、(x, y)ではマウスカーソルの位置を得ることができず、(clientX, clientY)を使わないといけないらしい。