javascript - fx.morph 列表在 "click"而不是 "mouseenter"

Question

我试图获得与 fx.morph 演示类似的结果，但点击而不是“mouseenter”或“mouseleave”。如果单击列表选项，它应该变形。如果单击另一个项目，它应该变形，而原始变形为默认状态。第一部分很简单，但到目前为止我还无法让第二部分按预期工作。我尝试创建一个“clickOutside”事件，但只有在您单击不是列表项的某个地方时才有效。新项目会变形，但旧项目不会恢复到其原始状态。

到目前为止我在哪里:

Element.Events.outerClick = {
    base : 'click',
    condition : function(event){
        event.stopPropagation();
        return false;
    },
    onAdd : function(fn){
        this.getDocument().addEvent('click', fn);
    },
    onRemove : function(fn){
        this.getDocument().removeEvent('click', fn);
    }
};

window.addEvent('domready', function() {
    $$('#idList LI').each(function(el) {
        el.set('morph', {
            duration: 200
        }).addEvents({
            click: el.morph.pass('.hover', el),
            outerClick: el.morph.pass('.default', el)
        });
    });

});​

如果你想摆弄:http://jsfiddle.net/JXTMa/

为了说明原始概念，我将其还原为原始的 mouseenter 示例。

Answer 1

outerClick 事件将被 e.stopPropagation 停止，因此您需要使用 this.getDocument().fireEvent('click') 手动触发该事件/p>

Element.Events.outerClick = {
    base : 'click',
    condition : function(event){
        event.stopPropagation();
        this.getDocument().fireEvent('click');
        return false;
    },
    onAdd : function(fn){
        this.getDocument().addEvent('click', fn);
    },
    onRemove : function(fn){
        this.getDocument().removeEvent('click', fn);
    }
};

这是一个 fiddle 示例:http://jsfiddle.net/cNNjP/1/

我有时喜欢的另一种方法是创建一个类并将其用作组件。这是一个例子:http://jsfiddle.net/kVnY4/3/

编辑:更新了我的组件使用 toElement 和 store 的第二个 fiddle 。检查您的 javascript 控制台，您将首先看到从对象检索元素，然后从元素检索对象。