I previously reported that I needed to add a 100ms pause to enable swiping on a PlayBook. This fix worked in the Jan 20 version. However, this didn't work in the Jan 21 version, so I restored the Jan 20 version of lines 37-41 (startevent ... scrollevent), and swiping worked.

I can also get this to work by removing the mouse events from these statements. E.g. change
startevent : 'touchstart mousedown'
to
startevent : 'touchstart'
So it looks like the PlayBook doesn't like mousedown etc.

I am currently using the Jan 28 version, with the aforementioned regression to the Jan 20 version, and my own pause. Both of these fixes are required to allow swiping on a PlayBook.

The detection for Chrome desktop (isChromeDesktop) gives a false positive for mobile browsers which correctly identify Chrome as mobile but contain the word 'linux' (or 'windows', etc).

For example, this is a user agent from Chrome on the Galaxy Note III:

mozilla/5.0 (linux; android 4.3; samsung-sm-n900a build/jss15j) applewebkit/537.36 (khtml, like gecko) chrome/32.0.1700.99 mobile safari/537.36

isChromeDesktop finds 'chrome' and 'linux' and flags the client as Chrome desktop even though the agent has self-identified with chrome mobile.

I'm not familiar enough with user agent strings to suggest a reliable solution, but perhaps you could test for the word 'mobile' in the agent.

Using JQuery version 1.10.2

Using jquery.mobile-events.min.js from this GitHub source

Using this code:
$(".list-group-item").on('doubletap', function (e) {
alert('double tap');
});

This works on the desktop / laptop by reporting when I double click (it alerts 'double tap')

This fails in the iPhone 5S when I double tap

As you describe the API of 'singletap': This will not be triggered by doubletap or taphold, unlike tap.

But I find it to be contrary in real use. 'singletap' gets triggered after a 'tabhold', while 'tap' does not.
Please check this fiddle: http://jsfiddle.net/b_m_h/Hzq2d/

When using hardware or user agent emulation within Google Chrome on a desktop machine, the library does not correctly detect support for touch.

Hi! realy greate code! But I've mentioned that the interval is not correct if you do the 2. doubletap(3., 4. and so on). It seems to be that the tap time from the 1.tap of 1.doubletap is not resetted by the 2.doubletap. So if you do doubletap for the first time for example you have interval of 500 millisecond and then if you will wait 5 second and then do the doubletap one more time the interval will be 5500 seconds(and it should be 500).

First of all, you are awesome and we love you.

Second, looks like it's working fantastically on everything we've tested except Android Chrome browser. Works great on iOS Chrome.

Our Nexus 7 and Nexus 4 Android Chrome browsers only register the taps, swipes aren't taking.

THANK YOU! Hope this helps!

Hi benmajor

I've been using your plugin, and it has been super helpful. Thanks.

I have experienced slow and inconsistent response on Android tap listeners.

I do see that there is a 500 ms delay that is part of it.

For me doubletap isn't important, tap on Android is inconsistent, and I wanted a faster tap response. I started to use touchend, but had conflicts with swipe, so I did this little override:

// custom quicktap event
var swiped = false;
$(document).on("swipeend", function(){
swiped = true;
});
$(document).on("touchend", function(e){
if (!swiped) $(e.target).trigger("quicktap");
swiped = false;
});

I thought I'd share to see if you want to integrate it somehow.

In today's release, in IE8, I get this error.

Message: Object doesn't support this property or method
Line: 280
Char: 5
Code: 0
URI: file:///C:/Documents%20and%20Settings/Chris/My%20Documents/Web%20Sites/Chris/eastcoastride_test/res/jquery.mobile-events.min.js

Also a semicolon should be added on lines 77, 90, 129, 217.

Whenever the touchmove event is used, the following error is given in the console:

element.tapmove is not a function

I noticed you are memoizing thisObject in your special events functions, then triggering events such as swipe on that memoized object. This pattern doesn't work for delegated events.

For example with the following markup:

<html>
  <body>
    <span class="my-span"></span>
  </body>
</html>

This event works as expected:

$(".my-span").on("swipe", function(event) {
  console.log("swipe", event)
});

However, this event will never be triggered:

$("body").on("swipe", ".my-span", function(event) {
  console.log("swipe", event)
});

The reason for this is because you are triggering the event on the body element instead of the element in which the event occurred, which would then allow the event to bubble up and be caught.

The reason this came up for me is because in Backbone, events are added in the fashion of the second example, so when I attach a handler to a child element in a view, the event is never triggered for me.

A quick solution would be to trigger the event on $(e.target) instead of $(thisObject)

This may only be an issue on the swipe events. Those are the only events I have been using.

Hi

great lib.

important point for me is, events can be delegated, that is, they can be assigned to elements that are added dynamically to the page later. it doesnt specifically say so in the docs, had to test it .. but it seems to work just fine

Concerning the previous issue, the latest code fix does not work for me. I have deployed the updated version, and now swiping right does not work.

Concerning JSLint, I was not concerned about whitespace, but there are a few missing semicolons. When I run JSLint, I disable the options, "messy whitespace", "== and !=", "misordered definitions", and "many var statements per function". This prevents it from terminating part way through the file, and produces a more manageable error report.

error: failed to load library

First, thanks for this wonderful plugin. I'm not sure if this is supported, but when clicking a anchor tag that serves as a button, for example <a href="#">Next</a>, preventDefault(); or even return false is not working. Thanks.

$(element).on('tap',function(e){
   e.preventDefault();
});

EDIT: sorry for duplicate question : #2

For example, getEndEvent() returns mouseup or touchend, but the "provided events" list only shows tapend and not touchend as a provided event. I realize that tapend is the event this library provides, but maybe I don't understand why the utility wouldn't return that instead of touch.

Related, I am having some trouble trying to fully understand some of the docs around movements. I'm trying to use touchmove as a drop-in replacement for mousemove but that doesn't seem to be the correct event. There doesn't seem to be a tapmove event, only taphold which has a slightly different api than mousemove

Click 3 times in a row on the demo page: http://ben-major.co.uk/jquery-mobile-events/

The doubletap event is fired twice, where it should only be fired once.

Is there a setting to add a cooldown AFTER the first doubletap event is fired to prevent this from happening?

Tried latest code and your link to your Action area/console on my Galaxy S3 using the Chrome browser and it doesn't :(

In my scenario I need to bind the taphold for parent div and child div inside. Each binding will execute different functions. For example:

function parentFunction(e){
    //parent code
};

function childFunction(e){
    //child code
};

$('.parent').bind('taphold', parentFunction);
$('.child').bind('taphold', childFunction);

Things work well if I tap on parent div. But when I tap on child div both function will get executed.

I want to have only childFunction execute when child div is tapped. I've been trying with event.stopPropagation() but it make everything stop working.

Please help.

Many thanks.

The problem seems to be line #298 e.stopPropagation();

It does not allow the touchmove event to bubble up, which prevents scrolling in iScroll. So by changing to e.preventDefault(); I got it to work as expected.

On your demo page I'm not getting the doubletap notification.

I see as output (of course in reverse order):

Mobile Events library loaded. 14:52:47
"tapstart" called 14:52:50
"tapend" called 14:52:50
"tap" called 14:52:50
"tapstart" called 14:52:50
"tapend" called 14:52:50
"tap" called 14:52:50
"taphold" called 14:52:51

Oddly enough the doubletap registers fine on my desktop with a double click. Any suggestions. I was really hoping this was going to be useful for detecting a double tap on the phone. I'll check with my wife's phone and tablet later and see if it is different.

Thanks for any advice in this matter.

I implemented jQuery-Mobile-Events, and 'singletap' is not getting triggered from desktop browsers. It is, however, getting called from my iPhone. I used the demo provided in the github description, and 'singletap' also didn't get called... so it doesn't have anything to do with my configuration.

Whilst migrating to 1.9.1 the migrate plugin highlighted the use of attr to access data-xthreshold and data-ythreshold. Means that plugin can only be used between >1.7 as stated in documention and < 1.9.* which has now removed attr completely (unless you include the migrate plugin)

should use .data('xthreshold') and .data('ythreshold') instead.

When im doing:
$('#button').bind("tapend", function() {console.log("Test")});
$('#button').unbind("tapend");
It works fine i can see "Test" displayed once and then the event is unbinded, but if i do this again :
$('#button').bind("tapend", function() {console.log("Test")});
i'm seeing "Test" 2 times.
Doing the same with event 'click' works fine.

Doing something like -

$('a.someclass').live('singletap', function(e) {
    //some code
    e.preventDefault();
    return false;
});

Doesn't seem to have any effect on canceling out the page redirect. This particular test I did was using jQuery 1.7.2

In IE8, I get this error:

Line: 272
Error: Object doesn't support this property or method

The statement that fails is:
thisObject.addEventListener(settings.startevent, touchStart, false);

This is called from:
$('#slide').on('swipeleft', function(e) { location = document.getElementById('bprev').href; });

The URL that fails is
http://ctwist.jalbum.net/mirage_videos/index.html
If you click on any of the thumbnails and the subsequent navigation buttons, this same error appears on each page.

This works correctly in Firefox, Chrome & Safari.

Hi,
thank you for providing this library. Looking at your code I accidentally found if (delta < settings.doubletap_int && delta > 0 && (e.target == origTarget) && delta > 100) {. Looks like your checking for delta twice.

Hi

the demo url is not working in chrome. Console says

Refused to execute script from 'http://raw.github.com/benmajor/jQuery-Mobile-Events/master/src/jquery.mobile-events.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. (index):1

so .. minor issue.

Hi. I tested your plugin. If we will bind to 'singletap' but not bind to the 'doubletap' and we will double tap on the element then 'singletap' event will be raised twice. I.e. if we have
$element.bind('singletap', function (event) { console.log('stap'); });
and we will double tap on the $element then we will have "stap stap" on console. But there should be nothing.
But in this case:
$element.bind('doubletap', function (event) { }).bind('singletap', function (event) { console.log('stap'); });
if we will double tap then nothing will be in the console

As I understand the problem is that $this.data('doubletapped') changed only when we bind to doubletap event and that's why verification if (!$this.data('doubletapped') && ... which is inside singletap event body is always True.

Scenarios is I have a carousel with left and right arrows. I used tapstart and tapend events to detect the hold on one of the arrows. It works fine. But, if user tap and hold and then before releasing it drag upwards or downwards. tapend event does not fire resulting an hold state forever.

Other than that Nice Work!

The latest version still doesn't let me swipe on a Playbook. It does work if I apply the fix that I described in issue #7.

$('#slide').on('swipeleft', function() { document.location = document.getElementById('bnext').href; });
$('#slide').on('swiperight', function() { document.location = document.getElementById('bprev').href; });

If bnext is void, swipeleft behaves like swiperight. I would expect it to do nothing.

Yes, I know I should test for void, but I think you should handle this as well.

BTW If bprev is void, it behaves correctly; a swiperight does nothing.

BTW I am testing mouse gestures, not swiping.

Not really a bug with the code, but your demo doesn't work anymore. Gives this message: "Mobile Events library not found!"

http://ben-major.co.uk/jquery-mobile-events/

I have a situation where horizontal swiping disables vertical scrolling. The code that causes the problem is
if (vPrevPath)
{ $('#index').on('swiperight', function() { document.location = vPrevPath; });
}

An example of this is at
http://ctwist.jalbum.net/temp/index.html

On the first page, vertical scrolling works; vPrevPath is null, so swiperight is not invoked.

Now click on the Demo icon. This opens a page where vPrevPath is not null, so swiperight is invoked, and it works as intended. However, vertical scrolling is disabled. There are no other functions that could affect this. I am using jQuery 1.8.3. The method that fails is fIndexSwipe in http://ctwist.jalbum.net/temp/res/index.js

I think this is a bug. Any suggestions?

isChromeDesktop flag is always false.

change (line: 45):

    isChromeDesktop = ((agent.indexOf('chrome') > -1) && ((agent.indexOf('windows') > -1) || (agent.indexOf('macintosh') > -1) || (agent.indexOf('linux') > -1)) && agent.indexOf('chrome') < 0),

to:

    isChromeDesktop = ((agent.indexOf('chrome') > -1) && ((agent.indexOf('windows') > -1) || (agent.indexOf('macintosh') > -1) || (agent.indexOf('linux') > -1))),

Hey Ben,

since Android 4.3 your plugin won't trigger the tap event.
I've found out between touchstart and touchend the pixel coordinates change in a range of 5 pixel. I think the resolution of the devices is to big to look on the condition when x-start == x-end && y-start == y-end.

I've fixxed by my self.
Here my fix for tap:

in init:

var settings = {

tap_pixel_range: 5,

in touchend:

var end_x = (e.originalEvent.targetTouches) ? e.originalEvent.changedTouches[0].pageX : e.pageX,
end_y = (e.originalEvent.targetTouches) ? e.originalEvent.changedTouches[0].pageY : e.pageY;
diff_x = (start_pos.x - end_x),
diff_y = (start_pos.y - end_y);

if (
origTarget == e.target && started &&
((new Date().getTime() - start_time) < settings.taphold_threshold) &&
( (start_pos.x == end_x && start_pos.y == end_y) ||
(diff_x >= -(settings.tap_pixel_range) && diff_x <= settings.tap_pixel_range &&
diff_y >= -(settings.tap_pixel_range) && diff_y <= settings.tap_pixel_range))

){

cheers dutscher

Hey Ben. Awesome library.

However, the swipeleft/right events on some screen-width elements are blocking my page scroll. I've run into this in the past with another library and solved it by changing x/y thresholds, but I don't seem to be able to override your settings without changing the script itself.

Can you give me an idea how I'd override the threshold settings? Thanks!

hi there,
i scanned the qr-code link and opened teh link in chrome (latest version in play store).
sadly i get a message in the console "Mobile Events library not found". In chrome on my desktop it works quite right. Are there any known issues on this?

Hi, the demo page http://ben-major.co.uk/jquery-mobile-events/ isn't working in Chrome

Hi,
if you try to associate double tap event at an element, using .on() (for example):

• first time that you doubletap it works ok (if you tap doesn't fire the event but if you double tap it's fired)
• second time (after one double tap) if you tap just one time the doubletap event is fired and of course it's no good.

esample code:

$('#test').on('doubletap.test', function(e){alert(e.type)});

EDIT: there is this issue only if you use some meta for viewport, for example:

meta name="viewport" content="width=device-width, user-scalable=no"
OR
meta name="viewport" content="user-scalable=no"
OR
meta name="viewport" content="width=device-width"

with all of this 3 meta i see the bug. without meta i can use the doubletap event but it zoom the page too.

I'm testing with ipad 3.

When I apply this css to disable the mobile context menu and then try to do a touch hold down on that element then the menu still shows. -webkit-touch-callout: none;

Hi,

I got an issue while working with the plugin.
The tap event fires perfectly but doesn't when I scroll in my app.

Everytime I bind the event to a DOM element, the tap succeed but if I scroll on my page, then the tap event seems to be disabled and I can't figure out why it happens and how can I resolve this.

Any idea please ?

I've tested this on two phones and one tablet. The event will trigger if the swipe is fast but not when an average speed. swipeleft and swiperight work fine at any speed.

Hi,

First, thanks for this amazing script, you did a really great job but I found an issue when I'm trying to trigger a "tap" event. I got this error :

"event is not defined". ( line 224 )

It seems that you used event object rather than e. This issue only appear on FF.

If we replace

if(origTarget == event.target && ...

By

if(origTarget == e.target && ...

Everything seems to work fine.

Regards,

Hi Ben, great work on the library.

I can't get any events to work other than touchstart and touchend. I'm using iPhone 4S, iOS 1.6.2 with Safari and Chrome. I've tried my own example and they demo you provided.

Recent changes have caused in incompatibility with IE8; hasOwnProperty is not supported.

Message: Object doesn't support this property or method
Line: 38
Char: 9

Hello,

In the endEvent binding for doubleTap, the origEvent var is undefined.

Hi! Thx for fixing the bug with interval, but I've found another problem:
if you try to tap 3 times with same intervals it triggers "double tap" two times. And you cannot distinguish tap from double tap too, because if you do 3 taps it calls: "tap tap doubletap tap doubletap"(I cannot define 2 different functions for this both events).

Please note that there are some errors now occurring due to updates and changes in the latest release of jQuery (1.9.0 and 2.0 Beta). I am looking into fixing them as we speak, and will report back once the library is safe for use with jQuery 1.9.0+.

Hi guys, why is there an alert dialog popping up?