読者です 読者をやめる 読者になる 読者になる

HHeLiBeXの日記 正道編

日々の記憶の記録とメモ‥

イベント発生時のマウスカーソルの位置

イベントハンドラについて調べていたときに気づいたことがあって、ついでなので、そっちも調べてみた。
何かというと、マウスイベントが発生したときには当然マウスカーソルの位置を得ることができるが、キーイベントが発生したときにもマウスカーソルの位置を得ることができるブラウザがあったらしい。
調査対象は前回とほぼ同様なのだが、一応ちゃんと書く。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);
        }
    };
}

実行結果は次のとおり。

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)
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)
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)
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)
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)
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)を使わないといけないらしい。