Mootools`Events`在停止工作后仅在第一次“click”上工作。为什么?

时间:2010-08-11 16:10:27

标签: javascript javascript-events mootools click mouseleave

停止工作后,

Mootools Events在第一个click 。< 希望有人对此有疑问:http://jsfiddle.net/3j3Ws/
CSS

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'));
    }
    });
});​

2 个答案:

答案 0 :(得分:1)

你有奇怪的写作风格。

反正。这是毁灭。事件未被委派。即你的选择器是第一个div,但这是一个获得UID的物理元素和一个功能性的cllback。

通过执行.destroy()您将从dom中删除此div,即使您之后重新插入它,因为您不使用事件委派,事件将不再起作用(事件是元素存储的一部分,因此销毁也删除它们。)

结帐http://jsfiddle.net/dimitar/3j3Ws/1/ - &gt;证明它可以正常工作(为了简单.show().hide(),我添加了更多mootools,但你可以使用.setStyle("display", "none")

或者,将document.id("option")的事件视为click:relay(div.down),并将x html修改为class='down' - 然后您的代码将会保留。

答案 1 :(得分:0)

最有可能的是:

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

此时,您正在删除先前插入的<div>v</div>并将点击事件附加到。

稍后在mouseleave中,您可以:

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

重新创建div,但还没有将点击处理程序重新附加到新副本。

评论后续:

当您使用.set('html', x)时,您将使用新节点替换原始节点,这也取代了事件处理程序。处理程序附加到实际节点,而不是DOM树中节点的位置。