Fast Click - Click vs TouchStart

[Tom Krones]

Hello,

I found when playing with my app that the iPhone puts a delay on the
Click event which makes the app feel sluggish. I also wanted an
onclick highlight or active feature added to my app so the user knows
they clicked.

I wrote the code below. I use XUI and just added this code right
below the definition of the fire event (for me, around line 500). Now
instead of calling
x$('#elementID').click(callback);
i use
x$('#elementID').fastClick(callback);
it applies the 'highlight' class to the element which gives the user
feed back that they've clicked the element.

This code has a bug though, when scrolling on a touch screen, if your
swipe starts by landing on an element with the fastClick event the
'highlight' class is applied to that element for a brief moment which
I don't like. Anyone see how I might be able to prevent that?

What have you guys done to fix the click delay problem and get an
active or highlight feature? Did I waist my time, is thier something
already written to handle this?

fastClick: function (fn) {
return this.each(function (el) {
xui(this).touchstart(function (e) {
this.moved = false;
x$(this).addClass('highlight');

x$(this).touchmove(function (e) {
if (!this.moved) {
x$(this).removeClass('highlight');
}
this.moved = true;
}).touchend(function (e) {
x$(this).un('touchmove');
x$(this).un('touchend');
x$(this).removeClass('highlight');

if (!this.moved) {
fn();
e.preventDefault();
}
});
});
});
}

[Giacomo Balli]

use ontouchend

[Tom Krones]

So you're saying do something like this?

fastClick: function (fn) {
    return this.each(function (el) {

        xui(this).touchend(function (e) {
            fn();
            e.preventDefault();
        });
    });
}

That's much simpler and works well but how do I get the highlight feature? 

Thanks,
Tom

--
You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en

For more info on PhoneGap or to download the code go to www.phonegap.com

[Tom Krones]

Another bug that I've found is that touchstart/touchend doesn't work on computers with mice, only on touch screens which makes the app no longer usable when browsing/debugging on a computer.  Any ideas on how I might check if touchstart or touchend are valid events and if not use click?

[Giacomo Balli]

css property ":active" might also work with ontouchend don't remember...

[Jesse]

var CanTouch = (("createTouch" in document) || ("TouchEvent" in window));

Sent from my iPhone

[Tom Krones]

Cool thanks.  I started to use your code then noticed that xui actually has something built in to determine if the device can handle touches.

xui.touch

[Tom Krones]

With the code below, when scrolling on a touch screen, if your swipe starts by landing on an element with the fastClick event the event fires even though you were just trying to scroll the page...

Any ideas?

[Giacomo Balli]

i guess accounting for clumsy users is the hardest part of
coding... ;)

On Oct 5, 8:12 pm, Tom Krones <tkro...@gmail.com> wrote:
> With the code below, when scrolling on a touch screen, if your swipe starts
> by landing on an element with the fastClick event the event fires even
> though you were just trying to scroll the page...
>
> Any ideas?
>
>
>
> On Tue, Oct 5, 2010 at 9:58 AM, Tom Krones <tkro...@gmail.com> wrote:
> > So you're saying do something like this?
>
> > fastClick: function (fn) {
> >     return this.each(function (el) {
> >         xui(this).touchend(function (e) {
> >             fn();
> >             e.preventDefault();
> >         });
> >     });
> > }
>
> > That's much simpler and works well but how do I get the highlight feature?
>
> > Thanks,
> > Tom
>

> >> phonegap+u...@googlegroups.com<phonegap%2Bunsubscribe@googlegroups.c om>