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')

手动触发该事件

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/

我有时喜欢的另一种方法是创建一个类并将其用作Component。以下是一个示例：http://jsfiddle.net/kVnY4/3/

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

fx.morph列表“click”而不是“mouseenter”

1 个答案: