Debug:
Array
(
    [0] => 1152131691|開発日誌,JavaScript|Firefoxでのwindow.event| ワールドカップの準決勝ポルトガル-フランスのせいで寝むれない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);`}
``みたいに書けるわけです [署名/]|martin|1|1||| )
ppBlog official

[ Tags :: Firefox ]

Firefoxでのwindow.event

category-icon

 ワールドカップの準決勝ポルトガル-フランスのせいで寝むれないmartinです。

以前のエントリで「Firefoxでの擬似window.eventLink 」として、

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使いなら誰でも知っている、昔からの有名サイトWebFXLink 内にある「Classic Event Handlers - IE EmuLink 」で紹介してあった方法です。リンク先を見れば分かりますが、これ以上ないくらいシンプルでスマートなやり方ですねぇ。最初は、__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);
}

みたいに書けるわけです

   


— posted by martin at 05:34 am   commentComment [0]  pingTrackBack [1]

T: Y: ALL: Online:
Created in 0.0109 sec.
prev
2012.2
next
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29