2

我试图获得与 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 示例。

4

1 回答 1

1

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

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

这是一个示例小提琴：http: //jsfiddle.net/cNNjP/1/

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

编辑：更新了我的组件使用的第二个小提琴toElement和store. 检查您的 javascript 控制台，您将看到从对象中检索第一个元素，然后从元素中检索对象。

于 2013-01-02T20:08:13.007 回答