Skip to content

Loading…

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

Open
marioestrada opened this Issue · 5 comments

4 participants

@marioestrada

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

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

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.

@marioestrada marioestrada reopened this
@jeffreyzant

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.

@getphuture

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

Hi,
You can use ontouchstart event instead of onclick.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.