요소 ON 요소 ON OPENT 클릭, 본문 또는 요소에 닫기 클릭 MooTools

Question

나는이 바이올린을 만들었습니다 "Nofollow"> http://jsfiddle.net/nab6n/10/

볼 수 있듯이, 나는 2 개의 애니메이터, 요소 및 바디 클래스, 나는 요소를 먼저 클릭 한 후에 시체에 수업을 추가하지만 시체를 클릭하면 닫히지 않습니다.애니메이터를 로 정의하면

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

.

DIV가 신체 클릭에 열리지 않으려는 것을 제외하고는 확인을합니다.나는 그것을 클릭하는 것이 필요합니다.

도움이되는 모든 도움이됩니다.

고맙습니다!

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