Открыть div по щелчку элемента, закрыть по телу ИЛИ щелкнуть элемент Mootools

Question

Я сделал эту скрипку http://jsfiddle.net/nAb6N/10/

Как вы можете видеть, у меня есть 2 аниматора, элемент и класс тела, я добавляю класс в тело после первого щелчка по элементу, но как только я щелкаю по телу, он не закрывается. Если я определю аниматоры как

 var animators = $$('#opendiv,body');

все работает нормально, за исключением того, что я не хочу, чтобы div открывался при щелчке по телу. Мне нужно, чтобы закрыть на щелчок тела.

Любая помощь приветствуется.

Спасибо!

Answer 1

Правильно. Похоже, вам действительно нужен шаблон externalClick для закрытия. Вот тот, который наиболее заметно используется в разработчиках mootools, позволяя вам создавать пользовательские события, основанные на клике:

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

Это работает так: это основано на нормальном click, после добавления он добавляет функцию обратного вызова в качестве события щелчка в документе. когда click происходит внутри самого элемента, он перестает пузыриться через event.stopPropagation();иначе он будет пузыриться и обратный вызов будет запущен.

вот как это связывает воедино после вышесказанного:

http://jsfiddle.net/dimitar/nAb6N/13/

(function() {
    var opener = $('opendiv');
    var boxtoopen = $('box');

    boxtoopen.set('morph', {
        duration: 700,
        transition: 'bounce:out'
    });

    boxtoopen.addEvent('outerClick', function(event) {
        boxtoopen.morph(".openOff");
        opener.removeClass("hide");
    });

    opener.addEvent('click', function(e) {
        e.stop();
        boxtoopen.morph(".openOn");    
        this.addClass("hide");
    });

})();

Я также "передал" свойства морфинга CSS, так как это имеет смысл с точки зрения семантики.

PS обратите внимание, что вам нужны mootools 1.4.3 или 1.4.5, но не 1.4.4, так как в юнитах в этом выпуске есть морфийная ошибка. jsfiddle выше использует 1.4.6 (край mootools).