FireFoxでのイベント取得

2015/02/10

var e = arguments.callee.caller.arguments[0] || window.event;


//例:マウスクリック座標を取得
window.onclick = function click(e)
{
        e = arguments.callee.caller.arguments[0] || window.event;
        //この時、eは「MouseEvent click」を持つ
}

上記イベントを取得した後に、

e.clientX ;
e.clientY ;
等でクリック座標を取得できます。

油断していました。

今までブラウザゲームのデバッグは「Chrome」や「Safari」、たまに「IE」で行っていましたが、

正直「IEで動いたから心配ないだろう」と高をくくっておりました。

たまたま久々に「FireFox」でテストしたときに、しょっぱなからクリックが反応しなくてもうびっくりでした。



上記3つのブラウザは、マウスクリックをはじめた「イベント」を
window.event
で受け取ることができました。

そのため、「onclick」で呼ぶ場合は

window.onclick = function click()

でよかったのです。


しかし「FireFox」ではこれがなく、例えば
window.event.clientX ;
などと取得しようものなら、即座にエラーを吐き出され、処理がストップしてしまいます。


調べたところ、「FireFox」では「arguments」なるものが存在し、イベントはそこに格納されているようです。

この「arguments」、値をとる際「arguments[0]」と書くなど、とても配列っぽいのですが厳密には違うそうです。


また、なぜ「0」からとっているかというと、

上記の「onclick」イベント、
function click()
()になにも入っていません。

本来、この()に指定した関数がeventをもらってくるんだとか・・・


しかし今までこの事態を予想していなかったゆえ、イベントを取得する場面ではすべて()の中を空にして作成してしまいました。

そして()が空の場合、呼ばれたイベントは「arguments[0]」に格納されるとのことだそうです。


そこで、この格納されたイベントを引っ張り出すのが一番上の一行です。

取り出した「e」が「window.event」の持つ値を所持しているので、

クリックイベントなどの場合、clientやscreenの値を「e」から取得できます。


尚、「FireFox」でないブラウザは「window.event」でイベントを取得できちゃうので、

一応マルチ対応のため、「arguments[0]」から取得する場合と「window.event」から取得する場合とで分けています。