jQuery学习——clickoutside应用

  自定义clickoutside事件，使得点击绑定元素之外的位置可以执行handler。这个方法可以用event.special来实现，方法如下

  

(function($){
   var elems = $([]);
   $.event.special.clickoutside = {
     setup: function(){
        var elem = $(this);
        elems.add(elem);
       
        if(elems.length === 1){
           elems.bind('click',handler_event);
        }
    },
     teardown: function(){
        elems = elems.not(this);
        if(elems.length === 0){
           elems.unbind('click',handler_event);
        }
    },
    add:function(handlerObj){
       var old_handler = handlerObj.handler;
       handlerObj.handler = function(event,elem){
       event.target = elem;
       old_handler.apply(this, arguments);
    };
    }
};
  function handler_event(event){
    $.each(elems,function(){
       var elem = $(this);
       if(!elem === event.target && !elem.has(event.target).length){
          elem.triggerHandler('clickoutside', [event.target]);
      }
    });
  }
})(jQuery);

使用的时候：

//点击模态框的外部，隐藏模态框
$("#modal).bind('clickoutside',function(){
    $(this).hide();
});