Question

如你所见，我有2个动画师，一个元素和身体类，我在第一次单击元素后向body添加了类，但是一旦我点击body就没有关闭它。如果我将动画师定义为

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

它工作正常，除了我不希望div在身体点击打开。我需要它关闭身体点击。

感谢任何帮助。

谢谢！

Answer 1

右。好像你真的需要一个outerClick模式来关闭。这是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");
    });

})();

我还要外包＆＃39;对于CSS的变形属性，因为它在语义上更有意义。

P.S。请注意，您需要mootools 1.4.3或1.4.5，而不是1.4.4，因为该版本中的单位存在变形错误。上面的jsfiddle使用1.4.6（mootools edge）。

单击元素时打开div，关闭正文OR元素单击Mootools

1 个答案: