4 поста с таг IE6

В последните ми проекти почти не използвам event handler-и, който да закачам за даден елемент. Вместо това използвам event delegation и от там само слушам за събития, които се случват на долу по DOM дървото. В един по-предишен пост описвам как делегирам submit. Но за нещастие има и други проблемни събития, които не слушат спецификация зa HTML събития – а именно focus / blur.

Рядко използвам focus / blur или когато ги използвам, не ги делегирам. Но преди 3-4 седмици един познат се допита до мен. Защото имаше страница с повече от 150 input елемента, като на всеки от тях добавяше прилично количество event handler-и. Като се сложи и това, че динамично се добавяха и изтриваха доста елементи, нещата не бяха никак розови.

Като за начало всички handler-и се насочиха към document елемента, и това доста ускори нещата. Обаче focus / blur все още изискваше да се слагат отделно на всеки. Но тогава дойде на помощ хака за делегиране на focus/blur и custom събитията на Prototype.js и от тези две неща се роди това доста елегантно решение ( има го и на gist ):

(function() {
    function focusInHandler(e){
        Еvent.element(e).fire("focus:in");
    }
    function focusOutHandler(e){
        Еvent.element(e).fire("focus:out");
    }

    if (document.addEventListener){
        document.addEventListener("focus", focusInHandler, true);
        document.addEventListener("blur", focusOutHandler, true);
    } else {
        document.observe("focusin", focusInHandler);
        document.observe("focusout", focusOutHandler);
    }
})();

Интересното е, че от 1-2 седмици ми се налага да използвам доста често новите focus:in / focus:out , което от една страна доста изчиства и ускорява кода ми. Но и от друга страна прави доста по userfriendly самите компоненти които правя, така че всички са доволни. Като даже ако имам време мисля да пренапиша и кода за делегиране на  submit.

Доста често напоследък ми се налага да правя динамични страници изцяло задвижвани от javascript, като при тях постоянно се добавят и махат dom елементи. Което значи непрекъснато да се добавят и махат event хандлъри, което е меко казано досадно и води до много грешки. Но с вградените в CD3.Behaviors event delegation функции (за тях специално ще има поне един цял пост) тази работа е много лесна, просто делегирам всички действия към елементи които няма да се променят.

До тук всичко звучи много добре, но както винаги IE се появява на сцената с бъг, който е, че submit действието няма bubbling (т.е. не се делегира към родителските елементи на формата). Което е в пълен разрез със спецификация, но какво да се прави свикнали сме.

Този проблем го знам от много време и винаги го заобикалях по един или друг начин. Но наскоро на колега му трябваше бързо решение, което да може да ползва на 2 – 3 места затова за няколко минути написах това за Prototype.js:

Element.addMethods({
    delegateSubmit: function(element, callback){
        return $(element)
            .observe('click', function(e){
                if (e.findElement('form') && e.findElement('input[type=submit],input[type=image]'))
                    callback.call(this, e);
            })
            .observe('keyup', function(e){
                if (e.keyCode  == Event.KEY_RETURN && e.findElement('input') && e.findElement('form'))
                    callback.call(this, e);
            })
        }
});

Като цяло това, което прави тази функция е, че наблюдава за натискане на submit или image бутони или за натискане на enter върху някои input. Лошото в случая е, че страдат и нормалните браузъри като Firefox или Safari.

Затова направих нова версия, която засича дали submit се делегира (за начина, по който разбирам пише по-подробно в тази статия – Detecting event support without browser sniffing)

Element.addMethods({
    delegateSubmit: (function(){
        var el = document.createElement('div'), isSupported = 'onsubmit' in el;

        if (!isSupported){
            el.setAttribute('onsubmit', 'return;');
            isSupported = typeof el.onsubmit == 'function';
        }

        return isSupported ? function(element, callback){
            return Event.observe(element, 'submit', callback);
        } : function(element, callback){
            return $(element)
                .observe('click', function(e){
                    if (e.findElement('form') && e.findElement('input[type=submit],input[type=image]'))
                        callback.call(this, e);
                })
                .observe('keyup', function(e){
                    if (e.keyCode  == Event.KEY_RETURN && e.findElement('input') && e.findElement('form'))
                        callback.call(this, e);
                    })
        };
    })()
});

Това е доста по-добро решение което оправя проблема със submit само, когато има такъв проблем.

Тук бих могъл примерно да използвам Function.wrap върху Event.observe, но нещо не съм фен такива monkey patching неща. А и по-скоро това и хака за делегиране на focus/blur под IE ще са част от моята Event.delegate, която ако имам късмет ще е част от Prototype.js.

Ако някой има по-елегантно решение, няма да му се разсърдя ако го сподели.

Една от най-известните и уважавани компании в Интернет – 37signals, отново показаха че са много по-напред от всички (или почти всички). Като решиха да не подържат повече IE6 в техните приложения .

Phasing out support for IE 6 across all 37signals products on August 15, 2008

Като се има предвид че преди около един месец и Apple решиха да не вземат под предвид IE6 в новия си .Mac – MobileMe. Като се надявам, че с такива действия и инициативи като http://www.savethedevelopers.org/(за който писах по-рано) това да е началото на края за IE6!

В тоя ред на мисли е редно да спомена че ние, в Pixeldepo, също ще направим подобна стъпка( донякъде). IE6 няма да бъде подържан в Админ панела на новата версия на нашата CMS ситема – Control  Depo. 3та версия на Conrol Depo е планувана за края на този месец. За нещастие IE6 все още е A-grade браузър и ще се налага за frontend-a(въшната част) на сайтовете и приложенията ни да се подържа. Но това все пак е стъпка напред…

Днес след работа както винаги след тежък ден борба с бозата (както “галено” казваме на IE6), за пореден път ми мина идеята за световен ден за Unistall IE6 (нещо като Firefox 3 download day). Така че да направим IE6 най-деинсталирания софтуер на света в рамките на ден (а може и за по-дълъг период от време).

Но докато аз спя, хората в света работят.

http://www.savethedevelopers.org/

Това е добра инциятива която подкрепям с двете ръце! Лично аз съм фен на Firefox, но всичко е по-добре от IE6!