search

ftlabs / fastclick

Polyfill to remove click delays on browsers with touch UIs
MIT License
18.65k stars 3.22k forks source link

Synthesize mousedown and mouseup events also? #20

Closed cspotcode closed 10 years ago

cspotcode commented 12 years ago

Are there plans to synthesize other events in addition to the click event?

Some UI components rely on other mouse events triggered by the browser before the click event. I use the Yahoo! User Interface Library 2 at work. YUI2's button will not display an attached dropdown menu unless it gets a mousedown and a mouseup event before the click event.

I've reproduced this issue in a JSFiddle. It's a copy-paste of the dropdown menu example from YUI2's documentation (here), with FastClick added. It works fine on a desktop browser. In iPad Safari, however, the buttons don't work unless you long-tap them. http://jsfiddle.net/cspotcode/kcNs9/

Here's the same thing with mousedown and mouseup events being synthesized, using my fork of fastclick. It works correctly on iPad. http://jsfiddle.net/cspotcode/zyujM/

Caveats:

EDIT: forgot to link to my fastclick fork: https://github.com/cspotcode/fastclick

mattcg commented 12 years ago

I've thought about this before and it sounds good in theory, but it would introduce complexity to FastClick for something that's not normally needed. It seems a bit odd that the YUI library won't display a dropdown menu unless mousedown and mouseup events are fired. Have you tried using YUI 3 instead?

Thank you for taking the time to fork and show me an example though, I appreciate it.

cspotcode commented 12 years ago

Ah, ok, that's fine. I have my fork that I can keep using.

It wasn't my decision to use YUI2 and, if I have the chance, I'll probably switch to something smaller than YUI3.

mattcg commented 12 years ago

OK, thanks. If you do move to another library (or YUI3) let me know how things go.

ghost commented 12 years ago

I was just about to open this issue, but not because of YUI 3, just some code I was writing that relied on the mousedown and mouseup events. Is there any solution for this in FastClick or is it something not worth the effort?

cspotcode commented 12 years ago

I suppose you could either use my code or:

Add your own 'click' event listener to <body> that intercepts all of FastClick's synthetic click events (by checking if the event's forwardedTouchEvent property is true) If it gets a FastClick click event, it suppresses it, then sends its own mousedown, mouseup, and click events. You'd also have to tag your click events with the forwardedTouchEvent property so that they make it past FastClick's own event filter.

krunkosaurus commented 12 years ago

Have to say that I have a pretty robust backbone application and adding fastclick in my application messed up a lot of functionality. I ended up modifying the source to ignore text areas or input[type=text] and it improved a lot but mousedown events like the OP mentioned is still a big issue especially other small JS libs we use that rely on mousedown including jquery.tokeninput.js. The fastclick homepage should mention this warning so users understand what they're getting in to.

cspotcode commented 12 years ago

@krunkosaurus: You probably figured this out, but since you've already modified fastclick, adding mousedown synthesis is really simple and would improve some of those issues you talk about. It's basically two lines of copy-paste.

ghost commented 12 years ago

My get around for this was to check if the user was on a mobile device, and if so, bind 1 click event instead of a mouseup and mousedown in the Backbone.Views events property. Then on the click event handler, i set a timeout of 200 MS or so to trigger the normal mouseup handler that non mobile devices use. A bad hack, but it was the only thing that worked for me in this case.

mattcg commented 12 years ago

I'm reopening this issue as there seems to be much more interest than I thought. I have no Backbone experience - will someone supply a minimal use case with Backbone demonstrating the problem please?

rjmunro commented 11 years ago

I'm using jQuery mobile, and fastclick is helping to navigate quickly when I tap, but there is still a delay in buttons looking pressed. I suspect this is a common situation.

Demo here: http://jsfiddle.net/Jv2D3 Navigate to this URL on an iPhone to see the problem: http://jsfiddle.net/Jv2D3/embedded/result/

(Arguably jQuery mobile, being a mobile targetted framework should solve this problem itself without fastclick, but it doesn't)

kris-lab commented 11 years ago

We're having the same problem, using the select2 component, which needs the mouseup event.

mattcg commented 11 years ago

A fix for this is being discussed in #103.

matthew-andrews commented 10 years ago

Replaced by https://github.com/ftlabs/fastclick/pull/308