LiosK-free Blog

• 2007-12-09
• カテゴリ: Client Side
• タグ: Tips JavaScript jQuery hover 修正 トラックバック

以前、jQueryのhover関数を移植したことがあったのだが、実地で使ってみたらいろいろとバグが出たので修正。

jQueryのソースでは、

// Traverse up the tree
while ( p && p != this ) try { p = p.parentNode; } catch(e) { p = this; };

// If we actually just moused on to a sub-element, ignore it
if ( p == this ) return false;

となっているコードを、大幅に省略して

do if (p == elm) return false; while (p = p.parentNode);

としていたんだが、やはり横着するとよくないらしい。ところどころでバグる。

修正版

仕方がないので、jQueryの処理をそのまま使うことにした。少し変えたけど。

function hover(elm, mouseover, mouseout) {
    var over = function(e) {
        var p = e.relatedTarget || (e = window.event).fromElement;
        while (p && p != elm) try { p = p.parentNode; } catch (error) { p = elm; }
        return (p != elm) && mouseover.call(elm, e)
    }, out = function(e) {
        var p = e.relatedTarget || (e = window.event).toElement;
        while (p && p != elm) try { p = p.parentNode; } catch (error) { p = elm; }
        return (p != elm) && mouseout.call(elm, e)
    };

    if (elm.addEventListener) {
        elm.addEventListener('mouseover', over, false);
        elm.addEventListener('mouseout', out, false);
    } else {
        elm.attachEvent('onmouseover', over);
        elm.attachEvent('onmouseout', out);
    }

    return elm;
}

prototype.js版とprototype.jsなし版は大して変わらなかったのでprototype.jsなし版のみ。

動作例

以前の記事と同じ動作例。

#example

• パーマリンク
• コメント (1)
• トラックバック (0)
• 
• 

http://liosk.blog103.fc2.com/tb.php/62-dba91d19

みんな の プロフィールは、アクセスアップをお手伝いするサイトです。
http://blog.livedoor.jp/mipurofi/


より多くのひとに貴方のブログを見てもらえます。

• 2007-12-11
• by みんな の プロフィール
• id:-