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