自定义’outerClick’ 事件,基于MooTools or jQuery

关于outerClick 自定义事件,最早是来自Jan Kassens的Blog 。而现在,我们已经有更简洁,优雅,轻巧的版本代替它。

以上的阐述都是针对MooTools版的outerClick 自定义事件。

不过,为了满足不同的javaScrip库爱好者的需求,我这里还提供了jQuery版outerClick自定义事件的插件。

outerClick的作用就是当我们点击指定元素外的区域时会触发事件。非常有用,特别是用于下拉和弹出窗口效果。

MooTools custom event “outerClick”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Element.Events.outerClick = {
 
	base : 'click',
	/*event.stopPropagation()该方法将停止事件的传播,阻止它被分派到其他 Document 节点。
	在事件传播的任何阶段都可以调用它。
	注意,虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用,
	但是它可以阻止把事件分派到其他节点。
	*/
	condition : function(event){
		event.stopPropagation();// stop event bubbling to the body
		return false;// never run handler when clicking on element
	},
	/*getDocument() return this.ownerDocument;*/
	onAdd : function(fn){
		this.getDocument().addEvent('click', fn);
	},
	onRemove : function(fn){
		this.getDocument().removeEvent('click', fn);
	}
 
};
window.addEvent('domready',function(){
   $$('a').addEvent('outerClick', function(){ alert("ok");});									
});

演示:MooTools 自定义outerClick事件

 

jQuery custom event “outerClick”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
/*
 * The outerClick event is fired when an element outside of the target element is clicked.
 * 
 * Usage:
 * $(selector).bind("outerClick", fn);   // Bind the function fn to the outerClick event on each of the matched elements.
 * $(selector).outerClick(fn);           // Bind the function fn to the outerClick event on each of the matched elements.
 * $(selector).trigger("outerClick");    // Trigger the outerClick event on each of the matched elements.
 * $(selector).outerClick();             // Trigger the outerClick event on each of the matched elements.
 * $(selector).unbind("outerClick", fn); // Unbind the function fn from the outerClick event on each of the matched elements.
 * $(selector).unbind("outerClick");     // Unbind all outerClick events from each of the matched elements.
 */
 
/*global jQuery */
(function ($, elements, OUTER_CLICK) {
 
	/**
	 * Check if the event should be fired.
	 * @param {Object} event  The click event.
	 * @private
	 */
	function check(event) {
		for (var i = 0, l = elements.length, target = event.target, el; i < l; i++) {
			el = elements[i];
			if (el !== target && !(el.contains ? el.contains(target) : el.compareDocumentPosition ? el.compareDocumentPosition(target) & 16 : 1)) {
				$.event.trigger(OUTER_CLICK, event, el);
			}
		}
	}
 
 
	$.event.special[OUTER_CLICK] = {
 
		setup: function () {
			var i = elements.length;
			if (!i) {
				$.event.add(document, 'click', check);
			}
			if ($.inArray(this, elements) < 0) {
				elements[i] = this;
			}
		},
 
		teardown: function () {
			var i = $.inArray(this, elements);
			if (i >= 0) {
				elements.splice(i, 1);
				if (!elements.length) {
					$.event.remove(document, 'click', check);
				}
			}
		}
 
	};
 
 
	/**
	 * Event helper outerClick
	 * 
	 * @param  {Function} [fn]  A function to bind to the outerClick event on each of the matched elements.
	 *                          If fn is omitted the event is triggered.
	 * @return {jQuery}         Returns the jQuery object.
	 */
	$.fn[OUTER_CLICK] = function (fn) {
		return fn ? this.bind(OUTER_CLICK, fn) : this.trigger(OUTER_CLICK);
	};
 
})(jQuery, [], 'outerClick');

演示:http://littleroom.se/playground/outerClick/

站点统计