当鼠标点击页面其他地方时隐藏某个元素

这个比较常用，比如我们点击弹出一个下拉框，但是想当鼠标点击别的地方时下拉框自动隐藏。注意区别于hover.

首先是clk-hide.js 文件的内容:

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var isCursorIn, regEles;

isCursorIn = require('./is-cursor-in.coffee');

regEles = require('./register-clk-hide.coffee');

(function() {
  var $;
  if ((typeof window) === 'undefined') {
    return console.error("only run in browser.");
  }
  if ((typeof jQuery) === 'undefined') {
    return console.error("require jQuery.");
  }
  $ = jQuery;
  return $(document).click(function(e) {
    return $.each(regEles(), function(originSelector, arg) {
      var base, hideSelector, name, options;
      hideSelector = arg[0], options = arg[1];
      if (options.findAsChild) {
        return $(originSelector).each(function(index) {
          var base, name;
          if (isCursorIn(this) || isCursorIn(hideSelector)) {
            return;
          }
          return typeof (base = $(hideSelector, this))[name = options.handle] === "function" ? base[name]() : void 0;
        });
      } else {
        if (isCursorIn(originSelector) || isCursorIn(hideSelector)) {
          return;
        }
        return typeof (base = $(hideSelector))[name = options.handle] === "function" ? base[name]() : void 0;
      }
    });
  });
})();


},{"./is-cursor-in.coffee":2,"./register-clk-hide.coffee":3}],2:[function(require,module,exports){

/*
这个函数会保存当前鼠标所在的元素，然后通过这个元素判断鼠标是否在指定的元素里
@param ele jQuery对象
 */
module.exports = (function() {
  var currentEle;
  currentEle = null;
  $(document).mouseover(function(e) {
    return currentEle = e.target;
  });
  return function(ele) {
    var currentEleJquery;
    currentEleJquery = $(currentEle);
    return currentEleJquery.is(ele) || currentEleJquery.parents().is(ele);
  };
})();


},{}],3:[function(require,module,exports){
var optionsDefault, regEles;

optionsDefault = {
  handle: "hide",
  findAsChild: true
};

regEles = {};

window.registerClkHide = function(originSelector, hideSelector, options) {
  return regEles[originSelector] = [hideSelector, $.extend(optionsDefault, options)];
};

module.exports = function() {
  return regEles;
};


},{}]},{},[1,2,3]);

如何调用呢？很简单首先引入上面的JS文件，（<span style="color:#ff6666;">但是前提是你必须也引入了jquery</span>）然后：

<pre name="code" class="javascript">$(function(){
	  window.registerClkHide(".click_ele ", "hide_ele", {
		    handle: "hide",

//
		    findAsChild:true
	});
})

传入的3个参数，分别是鼠标点击的元素，需要隐藏的元素，参数配置

也就是鼠标点击的位置不是 <span style="font-family: Arial, Helvetica, sans-serif;">click_ele时，hide_ele就会隐藏。</span><pre name="code" class="javascript">

页面里可能为有多个下拉框同时出现的情况，然后它们的class却都相同，但是我们想在点击第一个下拉框弹出后，当又点击另外一个时，

我们希望第一个下拉框收起来（消失），这时候我们就要用到参数配置里面的<pre name="code" class="javascript">findAsChild:true

<span style="color:#ff6666;">他的局限性是，hide_ele必须是click_ele的子元素。</span>