Форекс.список Морфов на "click" вместо " mouseenter"

Я пытаюсь получить аналогичные результаты для fx.morph demo, но на кликах вместо " 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 для иллюстрации исходной концепции.

1 2
javascript mootools

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/

Edit: обновлена вторая скрипка, где мой компонент использует toElement и store. Проверьте свою консоль javascript, и вы увидите сначала извлечение элемента из объекта, а затем извлечение объекта из элемента.

1