joehewitt / scrollability

Imitates iOS native scrolling in JavaScript.
http://joehewitt.github.com/scrollability
Other
1.78k stars 147 forks source link

Click event is triggered twice on an element inside scrollability area. #20

Closed marioestrada closed 5 years ago

marioestrada commented 13 years ago

Seems like scrollability might trigger a click event twice on an element, it is not triggered always twice but it does happen. Will try to put an example soon.

[edit] This is evident when putting a checkbox inside a scrollable element, it'll uncheck and check itself back when click once most of the time.

[edit #2] I should note I'm also using Zepto.js and Spine.js

jeffreyzant commented 13 years ago

I've had the same problem so i started searching in the code and what i found was this code:

// Simulate a click event when releasing the finger if (touched) { var evt = document.createEvent('MouseEvents'); evt.initMouseEvent('click', true, true, window, 1); touched[0].dispatchEvent(evt); releaseTouched(touched); }

This code would trigger a Click event but you are also triggering a click event when you are using jQuery.click or other functions. Just remove this piece of code and it works fine. :D

marioestrada commented 13 years ago

Yep I saw that, but I also assumed it is there for a reason son didn't wan't to touch it. I'll guess I have to.

jeffreyzant commented 13 years ago

There is really no reason why it should be in the code. The says that it would trigger a click but since the element has a click event it will trigger twice. Maybe in a few commits before it was necessary but now i don't see any reason.

ghost commented 12 years ago

I think both of you get the point.

About the mentioned snippet, from what I understand, it means onTouchMove was not called. ( touched is not null ) The user didn't want to drag, but to click an element. Yes, there is a reason it was added.

The issue is, as I did too, you're using a framework and it matters. Having experience using scrollability with jquery mobile ( should be the same with zepto ), I replaced the snippet with if (touched) { releaseTouched(touched); // unset the "touched" classname } to be free and do what I want :-)

Otherwise, just try to add your listeners outside of your scrollable element, or use touchup / mouseup, and everything should work properly

surbhij commented 12 years ago

Hi, You can use ontouchstart event instead of onclick.