jquery.event.ue
Advanced tools
Readme
Use this unified event plugin to applications that easily and seamlessly support mobile (touch) and desktop (mouse) environments.
The plugin recognizes mouse, keyboard, and touch motions that have
identical intent and publishes a single unified event for each. For example, a long-press
intent on a desktop is expressed by a motion where a user clicks on the LMB for over
0.5s without substantially moving the mouse. A long-press intent on a phone or tablet
is expressed by a motion where a user touches on a screen for over 0.5s without
substantially moving the touch point. This plugin recognizes the identical intents and
publishes the same uheld event for either. It does so for many intents:
This plugin is used in multiple commercial SPAs and is featured in the best-selling book Single Page Web Applications - JavaScript end-to-end, also available on Amazon.
Please see the ue-test.html file for a demonstration of the different intents. Expected
behavior is expressed in the BR corner of the tiles. If you see any unexpected behavior
while testing motions on your device please file a bug report so I can fix it.
This plugin is designed to work with jQuery 1.7.0+, and has been tested on most jQuery versions through 2.1.4.
This plugin works with the latest versions of popular browsers: Chrome 15+, Firefox 23+, Safari 5+, and IE 9+. IE9 requires edge settings:
<head><meta http-equiv="X-UA-Compatible" content="IE=edge" />
....
// bind to a mouse click or tap event
$( '#utap' ) .on( 'utap', onTap );
// bind to a long-press event
$( '#uheld' ).on( 'uheld', onHeld );
// bind to zoom events
$( '#uzoom' )
.bind( 'uzoomstart', onZoomstart )
.bind( 'uzoommove', onZoommove )
.bind( 'uzoomend', onZoomend )
;
// bind to drag events
$( '#udrag' )
.bind( 'udragstart', onDragstart )
.bind( 'udragmove', onDragmove )
.bind( 'udragend', onDragend )
;
// bind to hold-drag events
$('#uhelddrag')
.bind('uheldstart', onDragstart )
.bind('uheldmove', onDragmove )
.bind('uheldend', onDragend )
;
The following intents are supported:
See the ue-test.html file for example use of the
event object.
A click intent results in a utap event.
You may tweak the tap, drag, and long-press tolerances
in the defaultOptMap at the top of the lib. The API will have
a method to change these values in the future.
A long-press intent results in a uheld event.
A drag intent results in a single udragstart event, one or more
udragmove events, and a final udragend event.
Event order:
udragstart - fires at the start of a drag (LMB down or finger press where motion has moved out of the drag radius)udragmove - fires each time the mouse or finger movesudragend - fires at the end of a drag (LMB up or finger release)A zoom intent results in a single uzoomstart event, one or more
uzoommove events, and a final uzoomend event.
Event order:
uzoomstart - fires at the start of zoomuzoommove - fires as zoom amount changesuzoomend - fires at end of zoom motionThe event object for all ue events include these attributes in addition to those already provided by jQuery:
var attr_list = [
event.px_start_x, // X-position at start of motion
event.px_start_y, // Y-ibid
event.px_current_x, // X-position, current
event.px_current_y, // Y-ibid
event.px_end_x, // X-position for x at end of motion
event.px_end_y, // Y-ibid
event.px_delta_zoom, // Zoom delta since last motion event
event.px_delta_x, // X-ibid
event.px_delta_y, // Y-ibid
event.px_tdelta_x, // X-delta since beginning of motion
event.px_tdelta_y, // Y-ibid
event.orig_target, // Element under cursor at start of motion
event.elem_bound, // Element on which event was bound
event.elem_target, // Element under the cursor for *this* event
event.timeStamp, // Timestamp of this event
event.ms_elapsed, // Elapsed time since start of motion
event.ms_timestart, // Start time of motion
event.ms_timestop, // top time of motion
];
This code ignores bad input, and does not throw exceptions. As JS implementations are (finally) seeing improved exception handling, expect this to change in 2.x.
jQuery event namespacing is fully supported, as shown in this example:
$( '#msg' )
.on( 'utap.mytap', onTapMsg )
.on( 'uheld.mytap', onHeldMsg );
$( '#msg' ).unbind( '.mytap' );
This is a library that strives to be best-in-class. If you are considering using an SPA framework, please read Do you really want an SPA framework? first.
Michael S. Mikowski (mike[dot]mikowski[at]gmail[dotcom])
Dual licensed under the MIT or GPL Version 2 http://jquery.org/license
Updated ue-test.html to handle zooming correctly.
Stopped preventDefault() from firing on events not controlled by the plugin.
No code changes. Updated npm keywords. Fixed typos. Bumped version number to represent maturity and stability. Redirected library discussion to blog post.
The default px_radius parameter was doubled from 5px to 10px. This made utap
and uheld events work much better on smaller screens. Confirmed compatible with
with jQuery 2.1.4, thus 1.7.0 - 2.1.4 appear safe.
Fixed held logic, added px_tdelta_x and px_tdelta_y to attributes.
Updated test page to include expected results.
Updated docs, jslint compatibility, removed cruft, updated test page to include zoom support (shift + mb1 hold + mouse up/down ).
Updated documentation and npm release.
Confirmed compatible with jQuery 1.7.0 through 1.9.1.
First release registered with jQuery plugins.
Tested with Android 3.2 Chrome, iOS5+ Safari, Chrome 15+, Firefox 23, and IE 9+.
The Hammer touch library, jQuery mobile.
Support a wider range of intents
If you want to help out, like all jQuery plugins this is hosted at GitHub. Any improvements or suggestions are welcome! You can reach me at mike[dot]mikowski[at]gmail[dotcom].
FAQs
Respond to Touch and Desktop events using the same handlers, including tap (click), long-press, drag, long-press-drag, pinch/mouse zoom. Used in commercial SPAs and featured in the best-selling book Single Page Web Applications - JavaScript end-to-end.
The npm package jquery.event.ue receives a total of 131 weekly downloads. As such, jquery.event.ue popularity was classified as not popular.
We found that jquery.event.ue demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A new report explores how advancements in LLMs are enhancing cyber threats, including polymorphic malware, personalized spearphishing, and the risk of hijacking customer service bots.
Security News
ESLint has approved an RFC that adds support for TypeScript configuration files, which is aimed at improving the developer experience and recognizing changes in the evolving JavaScript ecosystem.
Security News
The NVD is facing a significant backlog with over 12,500 CVEs awaiting analysis, and more than 50% of known exploited vulnerabilities (KEVs) left unenriched since mid-February.