Version: 1.1, Last updated: 3/16/2010
| jQuery outside events | Version: 1.1, Last updated: 3/16/2010 |
| License | Copyright © 2010 “Cowboy” Ben Alman, Dual licensed under the MIT and GPL licenses. |
| Examples | These working examples, complete with fully commented code, illustrate a few ways in which this plugin can be used. |
| Support and Testing | Information about what version or versions of jQuery this plugin has been tested with, what browsers it has been tested in, and where the unit tests reside (so you can test it yourself). |
| Release History | |
| Default “outside” events | Note that each “outside” event is powered by an “originating” event. |
| Functions | |
| jQuery. | Register a new “outside” event to be with this method. |
| Events | |
| outside events | An “outside” event is triggered on an element when its corresponding “originating” event is triggered on an element outside the element in question. |
Copyright © 2010 “Cowboy” Ben Alman, Dual licensed under the MIT and GPL licenses. http://benalman.com/about/license/
These working examples, complete with fully commented code, illustrate a few ways in which this plugin can be used.
Information about what version or versions of jQuery this plugin has been tested with, what browsers it has been tested in, and where the unit tests reside (so you can test it yourself).
| jQuery Versions | 1.4.2 |
| Browsers Tested | Internet Explorer 6-8, Firefox 2-3.6, Safari 3-4, Chrome, Opera 9.6-10.1. |
| Unit Tests | http://benalman.com |
Note that each “outside” event is powered by an “originating” event. Only when the originating event is triggered on an element outside the element to which that outside event is bound will the bound event be triggered.
Because each outside event is powered by a separate originating event, stopping propagation of that originating event will prevent its related outside event from triggering.
| OUTSIDE EVENT | ORIGINATING EVENT |
| clickoutside | click |
| dblclickoutside | dblclick |
| focusoutside | focusin |
| bluroutside | focusout |
| mousemoveoutside | mousemove |
| mousedownoutside | mousedown |
| mouseupoutside | mouseup |
| mouseoveroutside | mouseover |
| mouseoutoutside | mouseout |
| keydownoutside | keydown |
| keypressoutside | keypress |
| keyupoutside | keyup |
| changeoutside | change |
| selectoutside | select |
| submitoutside | submit |
Register a new “outside” event to be with this method. Adding an outside event that already exists will probably blow things up, so check the Default “outside” events list before trying to add a new one.
jQuery.addOutsideEvent( event_name [, outside_event_name ] );
| event_name | (String) The name of the originating event that the new “outside” event will be powered by. This event can be a native or custom event, as long as it bubbles up the DOM tree. |
| outside_event_name | (String) An optional name for the new “outside” event. If omitted, the outside event will be named whatever the value of `event_name` is plus the “outside” suffix. |
Nothing.
An “outside” event is triggered on an element when its corresponding “originating” event is triggered on an element outside the element in question. See the Default “outside” events list for more information.
jQuery('selector').bind( 'clickoutside', function(event) {
var clicked_elem = $(event.target);
...
});jQuery('selector').bind( 'dblclickoutside', function(event) {
var double_clicked_elem = $(event.target);
...
});jQuery('selector').bind( 'mouseoveroutside', function(event) {
var moused_over_elem = $(event.target);
...
});jQuery('selector').bind( 'focusoutside', function(event) {
var focused_elem = $(event.target);
...
});You get the idea, right?