benmajor / jquery-touch-events Goto Github PK

View Code? Open in Web Editor NEW

699.0 44.0 225.0 321 KB

A collection of mobile event plugins for jQuery.

License: MIT License

JavaScript 100.00%

jquery-touch-events tap-events touch-devices jquery

jquery-touch-events's Issues

Tap doesn't work after scrolling

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 ?

hasOwnProperty not supported in IE8

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

Events not working on delegated handlers

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.

Bug when unbinding events

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.

Stopping a link doesn't seem to work

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

Double Tap not working in iPhone 5S Safari iOS

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

swipeend is rarely working on Android

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.

Forgot to comment "alert(isChromeDesktop)"?

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

Erroneous Chrome desktop detection

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.

swipeleft/swiperight blocking page scroll

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!

singletap can't be used without doubletap

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.

Emulation in Chrome not detecting touch support

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

'singletap' does not get triggered on desktop browsers

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.

jQuery 1.9.0 NOT SUPPORTED!

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

IE8 incompatibility

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.

Doesn't work with iScroll 4

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.

isChromeDesktop is always false

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

Swiping disables scrolling

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?

Demo page is not working in Chrome

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

Docs Confusion Regarding Event Names

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

Event gets bubble to parent after child event is done

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.

Doubletap interval is not correct after second, third and so on taps

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

swipe events no working

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.

Undefined origEvent on doubleTap lastTap

Hello,

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

Demo not working

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/

Does not work on Galaxy S3?

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

Tripple tapping fires double tap event twice.

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?

doubletap not working iPhone4 IOS7

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.

Chrome on Android is only firing taps, no swipes.

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!

touchmove Not Working

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

element.tapmove is not a function

Touch Pixel Range

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

Second call of double tap if you click 3 times with same interval

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

-webkit-touch-callout: none; doesnt seem to work with touchhold event

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;

Demo isnt working on chrome

error: failed to load library

Tap vs touchend Speed

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.

chrome mobiel not workin?

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?

Swiping on a Playbook

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.

Swiping on a PlayBook

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.

use of deprecated attr

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.

Swiping still not fixed

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.

Wrong behavior of 'tap' and 'singletap'

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/

demo not working in chrome

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.

Object doesn't support this property or method

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.

event is not defined

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

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

Everything seems to work fine.

Regards,

add delegate example in README.md

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


$(document).on('tap','.photo',function() {
alert('you tapped on a photo that wasnt here when i bound this event');
});

e.preventDefault is not working

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

tapend on an element

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!

double tap bug

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.

Void element error

$('#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.

Double check for delta value

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.

benmajor / jquery-touch-events Goto Github PK

jquery-touch-events's Issues

in init:

tap_pixel_range: 5,

in touchend:

){

Recommend Projects

Recommend Topics

Recommend Org

Jobs