[JavaScript]hover関数を修正

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[JavaScript]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

スポンサーサイト

関連記事

トラックバック URL

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

トラックバック

コメント

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


より多くのひとに貴方のブログを見てもらえます。
  • 2007-12-11
  • by みんな の プロフィール
  • id:-

コメントの投稿

お名前
コメント
編集キー
 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。