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

Open
marioestrada opened this Issue Jun 30, 2011 · 5 comments

Comments

Projects
None yet
3 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

This comment has been minimized.

Show comment
Hide comment
@jeffreyzant

jeffreyzant Jul 13, 2011

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

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

This comment has been minimized.

Show comment
Hide comment
@marioestrada

marioestrada Jul 13, 2011

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.

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

This comment has been minimized.

Show comment
Hide comment
@jeffreyzant

jeffreyzant Jul 13, 2011

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.

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

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Sep 3, 2011

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

ghost commented Sep 3, 2011

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

This comment has been minimized.

Show comment
Hide comment
@surbhij

surbhij Feb 29, 2012

Hi,
You can use ontouchstart event instead of onclick.

surbhij commented Feb 29, 2012

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