Apri Div on Element Click, Chiudi sul corpo o sul elemento Fare clic su Moooools

Question

Ho fatto questo violino http://jsfiddle.net/nab6n/10/

Come puoi vedere Ho 2 animatori, un elemento e una classe di corpo, Sto aggiungendo la classe al corpo dopo il primo clic su un elemento ma una volta che faccio clic sul corpo non lo chiude.Se definisco gli animatori come

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

.

funziona bene tranne che non voglio che il div da aprire sul body click.Ho bisogno che si chiuda sul corpo clicca.

Qualsiasi aiuto è apprezzato.

Grazie!

Answer 1

Right. Seems as if you really require an outerClick pattern to close. Here's the one that is most notably used within mootools devs, allowing you to create a custom event, based on click:

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

The way it works is: it is based on a normal click. upon adding, it adds the callback as a click event on the document. when a click happens within the element itself,it stops bubbling via event.stopPropagation();, else, it will bubble and the callback will run.

here's how it ties together after the above:

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

})();

I have also 'outsourced' the morph properties to the CSS as it makes more sense, semantically.

P.S. note that you need mootools 1.4.3 or 1.4.5, but not 1.4.4 as there's a morph bug to do with units in that release. the jsfiddle above uses 1.4.6 (mootools edge).