JavaScript++かも日記

【jQuery】イベントfixについて

【jQuery , リファレンス 】 ブックマーク-- Hatena  / Livedoor

  handle: function(event) {
　　// returned undefined or false
　　var val;

　　// Empty object is for triggered events with no data
　　event = jQuery.event.fix( event || window.event || {} ); 

  fix: function(event) {
    // store a copy of the original event object 
    // and clone to set read-only properties
    var originalEvent = event;
    event = jQuery.extend({}, originalEvent);
    
    // add preventDefault and stopPropagation since 
    // they will not work on the clone

    //高橋注:イベントキャンセルをevent.preventDefault()に統一
    event.preventDefault = function() {
      // if preventDefault exists run it on the original event
      if (originalEvent.preventDefault)
        originalEvent.preventDefault();
      // otherwise set the returnValue property of the original event to false (IE)
      originalEvent.returnValue= false;
    };

    //高橋注:イベントバブルキャンセルをevent.stopPropagation()に統一
    event.stopPropagation = function() {
      // if stopPropagation exists run it on the original event
      if (originalEvent.stopPropagation)
        originalEvent.stopPropagation();
      // otherwise set the cancelBubble property of the original event to true (IE)
      originalEvent.cancelBubble = true;
    };

    //高橋注:イベント対象要素取得をevent.target に統一
    // Fix target property, if necessary
    if ( !event.target && event.srcElement )
      event.target = event.srcElement;       

    //高橋注:イベント対象要素取得でTEXTノード時のsafariフィックス 
    // check if target is a textnode (safari)
    if (jQuery.browser.safari && event.target.nodeType == 3)
      event.target = originalEvent.target.parentNode;

    //高橋注:イベント移動要素取得をrelatedTargetに統一
    // Add relatedTarget, if necessary
    if ( !event.relatedTarget && event.fromElement )
      event.relatedTarget = event.fromElement == event.target ? event.toElement : event.fromElement;

    //高橋注:IEのDocType宣言により異なるDocument別にclientXへscrollLeft、
    // clientYへscrollTop を加えてevent.pageXとevent.pageYを他のブラウザと統一
    // Calculate pageX/Y if missing and clientX/Y available
    if ( event.pageX == null && event.clientX != null ) {
      var e = document.documentElement, b = document.body;
      event.pageX = event.clientX + (e && e.scrollLeft || b.scrollLeft || 0);
      event.pageY = event.clientY + (e && e.scrollTop || b.scrollTop || 0);    }

    //高橋注:キーコード取得をevent.whichで統一
    // Add which for key events
    if ( !event.which && (event.charCode || event.keyCode) )
      event.which = event.charCode || event.keyCode;
    
    //高橋注:Mac以外のブラウザでもMacのevent.metaKey をevent.ctrlKey で動作させる
    // Add metaKey to non-Mac browsers (use ctrl for PC's and Meta for Macs)
    if ( !event.metaKey && event.ctrlKey )
      event.metaKey = event.ctrlKey;

    //高橋注:マウスボタン押下番号IEのevent.button をevent.which と統一
    // Add which for click: 1 == left; 2 == middle; 3 == right
    // Note: button is not normalized, so don't use it
    if ( !event.which && event.button )
      event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));
      
    return event;
  }

内部でクロスブラウザ化されたevent.whichがどのような場合に露出されるか？

テストソース

<script src="./jquery.js" type="text/javascript"></script>

<div id="div17831">1 インラインなレガシーeventをargument.whichで取得</div>
<div id="div17832">2 インラインなレガシーeventをargument.which経由jQueryで利用
</div>
<div id="div17833">3 jQueryイベント内のargumentsで渡されるevent.which</div>
<div id="div17834">4 jQueryイベント内でグローバルなevent.whichを取得</div>

入力してください<input type="input" id="input1783" onkeyup="k(event)">
<script>
function k(event){ 
    //test1
    document.getElementById('div17831').innerHTML='1:キーコードは、'+event.which +'です。'
    //test2
    $("#div17832").html( "2:キーコードは、"+event.which +"です。");
 }

$("#input1783").keyup(function(e){
    //test3
    $("#div17833").html("3:キーコードは、"+e.which +"です。");
    //test4
    $("#div17834").html("4:キーコードは、"+event.which +"です。");
})
</script>

テスト

入力してください

結果

1 インラインなレガシーeventをarguments.whichで取得
2 インラインなレガシーeventをarguments.which経由jQueryで利用
3 jQueryイベント内のargumentsで渡されるevent.which　←これだけが全ブラウザででOK!
4 jQueryイベント内でグローバルなevent.whichを取得

たぶん結論

jQueryイベント内部でクロスブラウザ化された、jQueryの独自イベントは、
3のjQueryイベント内のargumentsで渡されるeventのwhichなど、
jQueryのイベントコールバック関数の引数としてのみ取得できますが、
グローバルなeventには影響しませんので、
他のライブラリなどと組み合わせても衝突などはありません。たぶん。

---

Milly ( 2007年11月01日 18:26 )

which に keyCode が格納されている場合があるだけで keyCode が変更されてるわけではないので、例が keyCode なのはよくないのでは。

高橋 ( 2007年11月01日 19:20 )

あ、本当だ、内部の話をしながら、途中からなぜか完全に勘違いしてました。Milly さんご指摘ありがとうございました。落ち込むなぁ、、、whichの条件式も頭の中で変になってたし。今日は朝からダメダメです。もう寝ようかな、、、。

Milly ( 2007年11月01日 19:32 )

なんだか落ち込ませてしまったみたいですが、いつも参考にさせていただいてます。これからも有用な記事を期待してます。:)

高橋 ( 2007年11月01日 19:44 )

ありがとうございます。中身は、少し不安になったので、再調査します。でも、今日はもう寝ます。ばた。

高橋 ( 2007年11月01日 23:24 )

寝ずにアバウトなテスト完了。ほぼスコープを推測(笑)できたような緩いような。。。最近、良いことが全然無くて、いまひとつ勢いが出ない状態です。今度こそ寝ます。

---

【コメント】(←clickで入力欄open)