jQuery outside events

Version: 1.1, Last updated: 3/16/2010

Project Homehttp://benalman.com/projects/jquery-outside-events-plugin/
GitHubhttp://github.com/cowboy/jquery-outside-events/
Sourcehttp://github.com/cowboy/jquery-outside-events/raw/master/jquery.ba-outside-events.js
(Minified)http://github.com/cowboy/jquery-outside-events/raw/master/jquery.ba-outside-events.min.js (0.9kb)
Summary
jQuery outside eventsVersion: 1.1, Last updated: 3/16/2010
LicenseCopyright © 2010 “Cowboy” Ben Alman, Dual licensed under the MIT and GPL licenses.
ExamplesThese working examples, complete with fully commented code, illustrate a few ways in which this plugin can be used.
Support and TestingInformation 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” eventsNote that each “outside” event is powered by an “originating” event.
Functions
jQuery.addOutsideEventRegister a new “outside” event to be with this method.
Events
outside eventsAn “outside” event is triggered on an element when its corresponding “originating” event is triggered on an element outside the element in question.

License

Copyright © 2010 “Cowboy” Ben Alman, Dual licensed under the MIT and GPL licenses.  http://benalman.com/about/license/

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).

jQuery Versions1.4.2
Browsers TestedInternet Explorer 6-8, Firefox 2-3.6, Safari 3-4, Chrome, Opera 9.6-10.1.
Unit Testshttp://benalman.com/code/projects/jquery-outside-events/unit/

Release History

1.1(3/16/2010) Made “clickoutside” plugin more general, resulting in a whole new plugin with more than a dozen default “outside” events and a method that can be used to add new ones.
1.0(2/27/2010) Initial release

Default “outside” events

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 EVENTORIGINATING EVENT
clickoutsideclick
dblclickoutsidedblclick
focusoutsidefocusin
bluroutsidefocusout
mousemoveoutsidemousemove
mousedownoutsidemousedown
mouseupoutsidemouseup
mouseoveroutsidemouseover
mouseoutoutsidemouseout
keydownoutsidekeydown
keypressoutsidekeypress
keyupoutsidekeyup
changeoutsidechange
selectoutsideselect
submitoutsidesubmit

Functions

jQuery.addOutsideEvent

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.

Usage

jQuery.addOutsideEvent( event_name [, outside_event_name ] );

Arguments

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.

Returns

Nothing.

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.  See the Default “outside” events list for more information.

Usage

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?

Note that each “outside” event is powered by an “originating” event.
Close