jQuery clickoutside event

Version: 1.1pre, Last updated: 3/15/2010

Project Homehttp://benalman.com/projects/jquery-clickoutside-plugin/
GitHubhttp://github.com/cowboy/jquery-clickoutside/
Sourcehttp://github.com/cowboy/jquery-clickoutside/raw/master/jquery.ba-clickoutside.js
(Minified)http://github.com/cowboy/jquery-clickoutside/raw/master/jquery.ba-clickoutside.min.js (0.9kb)
Summary
jQuery clickoutside eventVersion: 1.1pre, Last updated: 3/15/2010
LicenseCopyright © 2010 “Cowboy” Ben Alman, Dual licensed under the MIT and GPL licenses.
ExamplesThis working example, complete with fully commented code, illustrates one way 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’ events
Important noteBecause each ‘outside’ event utilizes a native event internally, stopping propagation of that native event may prevent the related ‘outside’ event from triggering on any related elements.
Functions
jQuery.addOutsideEventRegister a new event to be “outside-ified” with this plugin.
Events
clickoutside event (and other ‘outside’ events)The clickoutside event is triggered on an element when the mouse is clicked outside that element.

License

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

Examples

This working example, complete with fully commented code, illustrates one way in which this plugin can be used.

clickoutsidehttp://benalman.com/code/projects/jquery-clickoutside/examples/clickoutside/

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-clickoutside/unit/

Release History

1.0(2/27/2010) Initial release

Default ‘outside’ events

OUTSIDE EVENTNATIVE EVENT
clickoutsideclick
dblclickoutsidedblclick
focusoutsidefocusin
bluroutsidefocusout
mousedownoutsidemousedown
mouseupoutsidemouseup
mouseoveroutsidemouseover
mouseoutoutsidemouseout
mouseenteroutsidemouseenter
mouseleaveoutsidemouseleave
keydownoutsidekeydown
keypressoutsidekeypress
keyupoutsidekeyup
changeoutsidechange
selectoutsideselect
submitoutsidesubmit

Important note

Because each ‘outside’ event utilizes a native event internally, stopping propagation of that native event may prevent the related ‘outside’ event from triggering on any related elements.

Functions

jQuery.addOutsideEvent

Register a new event to be “outside-ified” with this plugin.  Adding an ‘outside’ event that already exists will probably blow things up, so check the Default ‘outside’ events list first, before trying to add a new one.

Usage

jQuery.addOutsideEvent( event_name [, outside_event_name ] );

Arguments

event_name(String) The name of the 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 name of `event_name` is, but with ‘outside’ appended to the end.

Returns

Nothing.

Events

clickoutside event (and other ‘outside’ events)

The clickoutside event is triggered on an element when the mouse is clicked outside that element.  All other ‘outside’ events work the same way, with behavior specific to the event 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 dbl_clicked_elem = $(event.target);
  ...
});
jQuery('selector').bind( 'focusoutside', function(event) {
  var focused_elem = $(event.target);
  ...
});

You get the idea.

Close