JavaScriptコードスニペット：ブラウザによるイベントの扱いを正規化する

JavaScriptでWWWブラウザ向けの処理を行おうとすると、ブラウザによって異なる挙動に対応するのに一苦労します。そのもっとも顕著なものがイベントの扱いでしょう。ここでは、受け取ったイベントを一旦下記のfixEvent()で正規化することにより、Internet Explorerのイベントの非標準的な振る舞いを吸収するようにしています。

【サンプルコード】

/*
 * event fix
 */
function(evt) {
        if (!window.event) {
            if (typeof evt.offsetX != 'number') { //not safari
                evt.offsetX = evt.pageX;
                evt.offsetY = evt.pageY;
                var el = evt.target;
                while (el) {
                    evt.offsetX -= el.offsetLeft ? el.offsetLeft : 0;
                    evt.offsetY -= el.offsetTop ? el.offsetTop : 0;
                    el = el.offsetParent ? el.offsetParent : el.parentNode;
                }
            }
        } else {
            evt = window.event;
            evt.target = evt.srcElement;
            evt.preventDefault = function() { this.returnValue = false; };
            evt.stopPropagation = function() { this.cancelBubble = true; };
            switch(evt.type) {
            case 'click':
            case 'mousedown':
            case 'mouseup':
            case 'mousemove':
                evt.which = evt.button==4 ? 3 : evt.button;
                if (document.compatMode == 'CSS1Compat') {
                    evt.pageX = evt.clientX + document.documentElement.scrollLeft;
                    evt.pageY = evt.clientY + document.documentElement.scrollTop;
                } else {
                    evt.pageX = evt.clientX + document.body.scrollLeft;
                    evt.pageY = evt.clientY + document.body.scrollTop;
                }
                break;
            }
        }
 
        if (evt) {
                evt.stop = function() {
                    evt.preventDefault();
                    evt.stopPropagation();
                    return evt;
                };
        }
 
        return evt;
}

JavaScriptコードスニペットへ

javascript