Öffnen Sie div auf Element Klicken Sie auf, in der Nähe des Körpers oder des Elements klicken Sie auf Mootools

Question

Ich habe diese Geige gemacht http://jsfiddle.net/nab6n/10/

Wie Sie sehen, habe ich 2 Animatoren, eine Element- und Körperklasse, Ich füge den Klassenkörper nach dem ersten Klick auf ein Element hinzu, aber sobald ich auf den Körper klicke, schließt es nicht.Wenn ich Animatoren definiere, wie generasacodicetagpre.

es funktioniert in Ordnung, mit der Ausnahme, dass ich nicht möchte, dass die DIV auf Body Click öffnet.Ich brauche es, um den Körper zu schließen, klicken Sie auf.

Jede Hilfe wird geschätzt.

Danke!

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