IT戦記

プログラミング、起業などについて書いているプログラマーのブログです😚

IE 以外の JavaScript で getter setter が使えるようになる!

Opera 9.5 では getter setter が使えるようになります。

http://my.opera.com/desktopteam/blog/kestrel-is-coming

Safari 3 でも使えるか試してみたら・・・

alert({ get x() { return 'ok' } }.x); // ok

つ、使えた!

Firefox でも

かなり前から getter setter が使える

という事は・・・

IE 以外で getter setter が使えるのはもうすぐだ!!!

IE にしかないプロパティを他のブラウザで実装することができるようになる!!

たとえば、こんな感じ?

// ↓条件付きコンパイル
/*@cc_on @if (@_jscript) @else @*/
    if (!('returnValue' in Event.prototype)) {
        Event.prototype.__defineSetter__('returnValue', function(returnValue) {
            if (!returnValue) {
                this.preventDefault();
            }
            return returnValue;
        });
    }
    if (!('cancelBubble' in Event.prototype)) {
        Event.prototype.__defineSetter__('cancelBubble', function(cancelBubble) {
            if (cancelBubble) {
                this.stopPropagation();
            }
            return cancelBubble;
        });
    }
    if (!('srcElement' in Event.prototype)) {
        Event.prototype.__defineGetter__('srcElement', function() { return this.target });
    }
    if (!('clientX' in Event.prototype)) {
        Event.prototype.__defineGetter__('clientX', function() {
            return this.pageX - (document.documentElement.scrollLeft || document.body.scrollLeft);
        });
    }
    if (!('clientY' in Event.prototype)) {
        Event.prototype.__defineGetter__('clientY', function() {
            return this.pageY - (document.documentElement.scrollTop || document.body.scrollTop);
        });
    }
/*@end @*/

これを使うと

document.onclick = function(event) {
    var event = event || window.event;
    alert(1);
    event.cancelBubble = true; // IE だけしか使えなかったプロパティ!!!
}

// cancelBubble によってイベントのバブリングが止まり、以下は実行されない。
window.onclick = function(event) {
    var event = event || window.event;
    alert(2);
};

が期待通りに動作し、イベントのバブリングを止めることができる。

まとめ

これからは、 getter setter を使ったクロスブラウザな実装がたくさん出てくるのかもしれない。