0

Mootools Eventsは、動作を停止した後、最初に動作します。 誰かがその問題を抱えていることを願っています：http：//jsfiddle.net/3j3Ws/ CSSclick

ul li,li.selected div{
    width:22px;
    height:22px;
    display:block;
    background:#000;
    color:#fff;
    text-align:center;
    border-radius:3px;
}
ul#list{
    display:none;
    opacity:0;
    float:left;
}

HTML

<ul id="option">
    <li class="selected" id="a">a</li>
    <ul id="list">
        <li id="b">b</li>
        <li id="c">c</li>
        <li id="d">d</li>
    </ul>
</ul>​

Mootools JavaScript

window.addEvent('domready', function(){
    var x = '<div>v</div>';
    $$('ul#option li.selected').set('html',x);
    var opt = $$('ul#option li.selected div');
    var d = opt.getStyle('display');
    var l = document.id('list');
    var list = opt.set('morph').addEvents({
        click:function(){
            l.store('timerA',(function(){
                l.morph({
                    'display':'block',
                    'opacity':1
                });
             $$('ul#option li.selected').setStyle('background-color','#fff');
             $$('ul#option li.selected div').destroy();
            }).delay(10,this));//$clear(this.retrieve('timerA'));
        }
    }
    );
    l.set('morph').addEvents({
    mouseleave:function(el){
        this.store('timerB',(function(){
            this.morph({
                'display':d,
                'opacity':0
            });
            $$('ul#option li.selected').removeProperties('style');
            $$('ul#option li.selected').set('html',x);
        }).delay(500,this));//$clear(this.retrieve('timerB'));
    }
    });
});​
4

2 に答える 2

1

あなたが持っている奇妙な文体。

とりあえず。それは破壊です。イベントは委任されません。つまり、セレクターは最初のdivですが、これは物理要素でUIDあり、それに対して機能的なcllbackを取得します。

これを行う.destroy()ことで、このdivをdomから削除し、後で再挿入しても、イベント委任を使用しないため、イベントは機能しなくなります（イベントは要素ストレージの一部であるため、destroyによっても削除されます）。

http://jsfiddle.net/dimitar/3j3Ws/1/をチェックしてください->それがうまく機能することを証明します（私は簡単.show()にするためにmootoolsをもっと追加しまし.hide()たが、あなたはただ使うことができます.setStyle("display", "none")。

document.id("option")または、 asのイベントを実行しclick:relay(div.down)、x htmlを変更してclass='down'、現在のコードを保持することを検討してください。

于 2010-08-11T17:39:29.897 に答える
0

それはおそらくこれです：

         $$('ul#option li.selected div').destroy();

その時点で、<div>v</div>前に挿入してクリックイベントを添付したものを削除します。

後でマウスリーブで、次のことを行います。

        $$('ul#option li.selected').set('html',x);

これはdivを再作成しますが、クリックハンドラーを新しいコピーに再アタッチしていません。

コメントフォローアップ：

を使用する.set('html', x)と、元のノードが新しいノードに置き換えられます。これにより、イベントハンドラーも置き換えられます。ハンドラーは、DOMツリー内のノードの場所ではなく、実際のノードにアタッチされます。

于 2010-08-11T16:54:04.983 に答える