1

我正在创建一个插件来显示一个模态框。我想在 html 上分配事件，以便在该框外单击，它必须关闭。如果从任何事件处理程序调用插件，它将传播到 body ，并调用关闭函数。我想从插件中停止传播事件。因为我不能要求用户在他们的事件处理程序上添加 event.stopPropagtion()。
我做的一个技巧是在绑定关闭事件上添加 setTimeout，但我知道在某些情况下可能会失败。

那么有没有什么方法可以实现。

示例代码：

(function ($, window, document, undefined) {

    $.fn.modelBox = function (option) {
        var myoptions = $.extend({}, $.fn.modelBox.defaults, option);

        methods['show'].call(this, myoptions);
        return this;
    };

    //default options
    $.fn.modelBox.defaults = {
        //default options
    }


    //internal method
    var clickEvent=function(e){
        modelBox=e.data.modalBox;
        methods['close'].call(modelBox);
    };

    var methods={
        show:function(option){
            var elm=this,
            elm.show();

            elm.bind('click',function(e){
                e.stopPropagation();
            });

            setTimeout(function(){$('html').bind('click',{modalBox:elm},clickEvent)},1000);


            //want to achieve this without time out

        },
        close:function(){
            var elm=this;
            elm.css('display','none');
            $('html').unbind('click',clickEvent);
        }   
    }               
})(jQuery, window, document);

$(document).ready(function(e) {
    $('#testBut').click(function(e) {
        $('#testDiv').modelBox();

    });
});

HTML

<div id="testDiv"></div>
<input type="button" id="testBut" />

CSS

#testDiv{
    width:400px;
    height:400px;
    background:#CCC;
}
4

0 回答 0