自定义’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");}); }); |
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'); |
文章评论 已经有 0 条评论!