LiosK-free Blog

• 2007-11-22
• カテゴリ: Client Side
• タグ: Tips JavaScript hover prototype.js jQuery

jQueryのhoverメソッドが便利です。↓こんな感じに使います。

$('#example').hover(
    function() {
        this._message = document.createElement('span');
        this._message.innerHTML = 'Let\'s hover.';
        this.appendChild(this._message);
        this.style.backgroundColor = 'yellow';
    },
    function() {
        this.removeChild(this._message);
        this.style.backgroundColor = 'white';
    }
);

出力は↓こんな感じ。

#example

何かと使い道が多くて便利なので、prototype.jsで動くような関数を作りたくなった。

jQueryでのhover()のコードは↓。

hover: function(f,g) {

    // A private function for handling mouse 'hovering'
    function handleHover(e) {
        // Check if mouse(over|out) are still within the same parent element
        var p = e.relatedTarget;

        // 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;

        // Execute the right function
        return (e.type == "mouseover" ? f : g).apply(this, [e]);
    }

    // Bind the function to the two event listeners
    return this.mouseover(handleHover).mouseout(handleHover);
},

Prototype.jsを使って

↑をprototype.jsで動くように改造したのが↓。

function hover(elm, mouseover, mouseout) {
    var over = function(e) {
        var p = e.relatedTarget || (e = window.event).fromElement;
        do if (p == elm) return false; while (p = p.parentNode);
        return mouseover.call(elm, e);
    }, out = function(e) {
        var p = e.relatedTarget || (e = window.event).toElement;
        do if (p == elm) return false; while (p = p.parentNode);
        return mouseout.call(elm, e);
    };

    return $(elm).observe('mouseover', over).observe('mouseout', out);
}

第一引数に対象のエレメントを渡す仕様になっている。

hover(element, function() {}, function() {});

もちろん、↓の1行を追加すれば、

Element.addMethods({hover: hover});

$()関数をくぐらせた要素のメソッドとして使うことができる。

$(element).hover(function() {}, function() {});

Prototype.jsなしでも

動くような関数も作ってみた。

function hover(elm, mouseover, mouseout) {
    var over = function(e) {
        var p = e.relatedTarget || (e = window.event).fromElement;
        do if (p == elm) return false; while (p = p.parentNode);
        return mouseover.call(elm, e);
    }, out = function(e) {
        var p = e.relatedTarget || (e = window.event).toElement;
        do if (p == elm) return false; while (p = p.parentNode);
        return mouseout.call(elm, e);
    };
    try {
        elm.addEventListener('mouseover', over, false);
        elm.addEventListener('mouseout', out, false);
    } catch (e) {
        elm.attachEvent('onmouseover', over);
        elm.attachEvent('onmouseout', out);
    }
    return elm;
}

実はこのエントリーで動いているサンプルはこのコードを使っている。

少し長くなる。普段、どれだけフレームワークに助けられているかを痛感する。

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

http://liosk.blog103.fc2.com/tb.php/56-9dd52601

[JavaScript]hover関数を修正

以前、jQueryのhover関数を移植したことがあったのだが、実地で使ってみたらいろいろとバグが出たので修正。 jQueryのソースでは、 // Traverse up the tree while ( p && p != this ) try { p = p.parentNode; }...

• 2007-12-09
• 発信元: 文系大学的IT系の悲哀