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

来源：互联网发布：sql注入危害编辑：程序博客网时间：2024/06/06 03:05

这个比较常用，比如我们点击弹出一个下拉框，但是想当鼠标点击别的地方时下拉框自动隐藏。注意区别于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>

0 0