ワールドカップの準決勝ポルトガル-フランスのせいで寝むれないmartinです。
以前のエントリで「Firefoxでの擬似window.event 」として、
function windowEvent(){ if(window.event) return window.event; var caller = arguments.callee.caller; while(caller){ var ob = caller.arguments[0]; if(ob && ob.constructor == MouseEvent) return ob; caller = caller.caller; } return null; }
というのを載せていましたが、どうせなら、Firefox(および、その他のモダンなブラウザ)にも、window.eventを認識させたいです。window.eventは使い勝手が良いので。で、このwindow.eventを簡単に認識させる方法があったので、今はこれを使っています。もともとのソースは、JavaScript使いなら誰でも知っている、昔からの有名サイトWebFX 内にある「Classic Event Handlers - IE Emu 」で紹介してあった方法です。リンク先を見れば分かりますが、これ以上ないくらいシンプルでスマートなやり方ですねぇ。最初は、__defineGetter__あたりを使ってエミュレートしようとしていたのですが。いやはや。
js/lib.jsでは、次のようにしています。
if(w3c){ // IE以外のモダンなブラウザなら. (function(){ for (var property in Event.prototype){ if(property.match(/MOUSE|CLICK/)){ window.addEventListener(property.toLowerCase(), function(e){ window.event = e; }, true); } } }()); };
イベントリスナーに逐一マウスイベントを列挙して登録しても良いのですが、Eventオブジェクトにある組み込み定数を利用してみました。マウスイベントを列挙するなら、次のような感じになると思います。
if(w3c){ // IE以外のモダンなブラウザなら. (function(){ var events = ["mousedown", "mouseover", "mouseout", "mousemove", "mousedrag", "click", "dblclick"]; for (var i = 0; i < events.length; i++){ window.addEventListener(events[i], function(e){ window.event = e; }, true); } }()); };
まぁ、こちらの方が記述も短めでオーソドックスなやり方ですが、イベントを列挙するのがメンドかったので、別のアプローチを取ってみました。お好きな方でよいと思います。
こうすると何が嬉しいかって、例えば、次のようなスクリプトにおいて、
document.onclick = function(e){ alert("Event X:"+e.clientX + ", Event Y:"+e.clientY); }
この引数のeは、Mozilla系のブラウザでは必須のもので省略は出来ません。こういうシンプルな例ならいいのですが、引数がいくつかあるような関数で、いちいちこのeを付けて回るのはメンドいものです。こういうときに、上記のエミュレーションを用いれば、
document.onclick = function(){ //eが不要 alert("Event X:"+event.clientX+", Event Y:"+event.clientY); }
みたいに書けるわけです
Comments