Abrir div clique no elemento , fechar no corpo OU elemento clique em Mootools

Question

Eu fiz este violino http://jsfiddle.net/nAb6N/10/

Como você pode ver, eu tenho 2 animadores , um elemento de corpo e de classe, Eu sou a adição de classe para o corpo após o primeiro clique sobre um elemento, mas uma vez que eu clicar no corpo não é fechá-lo.Se eu definir animadores como

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

ele funciona ok, exceto que eu não quero que a div para abrir no corpo do rato.Eu preciso dele para fechar o corpo do rato.

Qualquer ajuda é apreciada.

Obrigado!

Answer 1

Direito.Parece como se você realmente precisar de um outerClick padrão para fechar.Aqui está o que é mais freqüentemente usado dentro de mootools devs, permitindo que você criar um evento personalizado, com base em, clique em:

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

O modo como funciona é:ele é baseado em um normal click.após a adição, ele adiciona a callback como um evento de clique sobre o documento.quando um click acontece dentro do próprio elemento,ele pára de borbulhar através de event.stopPropagation();, senão, ele vai bolha e o retorno de chamada será executado.

aqui está como ele une após acima:

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

})();

Eu também 'terceirizou' o morph propriedades do CSS como faz mais sentido, semanticamente.

P. S.note que você precisa de mootools 1.4.3 ou 1.4.5, mas não 1.4.4 como não há uma combinação de bug para fazer com unidades em lançamento.o jsfiddle acima usa 1.4.6 (mootools de borda).