javascript - Extend jQuery's .on() to work with mobile touch events - Stack Overflow

admin管理员组

文章数量:1244224

I am attempting to use the jQuery mobile events without the rest of jQuery mobile.

.mobile.events.js

That snippet enables them all, and works fine, but not with the .on() event handler. E.g:

$('a').on('tap',function(){
    console.log('Hi there!');
});

However it does work with .live(), but that is now depreciated.

So my question; is there a a way to extend the .on() functionality to include the tap event and others? Full list below:

• touchstart
• touchmove
• touchend
• orientationchange
• tap
• taphold
• swipe
• swipeleft
• swiperight
• scrollstart
• scrollstop

Thanks :)

I am attempting to use the jQuery mobile events without the rest of jQuery mobile.

https://github./jvduf/jquery-mobile-events/blob/master/jquery.mobile.events.js

That snippet enables them all, and works fine, but not with the .on() event handler. E.g:

$('a').on('tap',function(){
    console.log('Hi there!');
});

However it does work with .live(), but that is now depreciated.

So my question; is there a a way to extend the .on() functionality to include the tap event and others? Full list below:

• touchstart
• touchmove
• touchend
• orientationchange
• tap
• taphold
• swipe
• swipeleft
• swiperight
• scrollstart
• scrollstop

Thanks :)

• javascript
• jquery
• mobile
• touch

Share Improve this question Follow asked Feb 16, 2012 at 12:14 willwill 4,57566 gold badges3434 silver badges3333 bronze badges 2

• The selector for on() needs to be a parent ... read the help for on() its very simple ... – Manse Commented Feb 16, 2012 at 12:33
• Cool extraction, but how up to date is it? Thinking 11 months old is pretty old at this point, is anyone maintaining this file? – rball Commented Apr 13, 2012 at 16:01

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

However it does work with .live(), but that is now depreciated.

So I take it that you want to use event delegation to preserve those events on replaced elements. That would mean that this:

$('a').on('tap',function () {
    console.log('Hi there!');
});

would need to change to something like:

$(document).on('tap', 'a', function () {
    console.log('Hi there!');
});

in order for it to behave the same as $("a").live("tap", ...

Maybe it should be better to extend the JQuery event code for mobile and desktop.

One way to do this is to use the JQuery vmouse (virtual mouse) plugin.

From vmouse plugin ments:

// This plugin is an experiment for abstracting away the touch and mouse
// events so that developers don't have to worry about which method of input
// the device their document is loaded on supports.
//
// The idea here is to allow the developer to register listeners for the
// basic mouse events, such as mousedown, mousemove, mouseup, and click,
// and the plugin will take care of registering the correct listeners
// behind the scenes to invoke the listener at the fastest possible time
// for that device, while still retaining the order of event firing in
// the traditional mouse environment, should multiple handlers be registered
// on the same element for different events.
//
// The current version exposes the following virtual events to jQuery bind methods:
// "vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel"

For a better explanation, see https://coderwall./p/bdxjzg

vmouse plugin: https://github./jquery/jquery-mobile/blob/master/js/jquery.mobile.vmouse.js

Also see this link about current state of (touch) events: http://blogs.adobe./adobeandjquery/2011/03/07/the-current-state-of-touch-events/

本文标签： javascriptExtend jQuery39s on() to work with mobile touch eventsStack Overflow