How can I trouble shoot click events being triggered twice?

Question

I have a one page app.
It uses backbone.js.
Click events via mouse trigger once.
Click events via touch device trigger twice.
Unbinding the one click event stops both on touch devices.

I can't figure out where to start looking.

This is the JS:

$('.classy').on('click', 'button', function(){
    console.log('clicked');
})

I need some help figuring out how to trouble shoot this. I know I haven't given enough information to receive a real answer. The confusing part to me is that this only happens on touch devices. If I was accidentally binding two events or creating two instance of the same view it wouldn't it happen for mouse clicks too?

Thank you.

EDIT: I tried using the tap event via jQuery Mobile. This had a strange reaction. It would fire the event once and looked like it was done, but the next time you touch anywhere on the screen it would fire the event again. ...weird, any ideas?

I finally found the problem. It was coming from layered iScrolls. I had to hack the lib at this point, probably a much better way to fix this but illustrates the point.

if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA' && window.iScrollClickFIX != true) {                        
    window.iScrollClickFIX = true;
    setTimeout(function(){
        window.iScrollClickFIX = false;
    }, 1)

Thanks for the help everyone.

Have you tried removing either `'click'` or `'button'` to see what happens? — , Dec 14 '11 at 09:11
Check out [http://forum.jquery.com/topic/click-event-firing-twice-from-a-touchscreen-device](http://forum.jquery.com/topic/click-event-firing-twice-from-a-touchscreen-device) and [http://stackoverflow.com/questions/3038898/ipad-iphone-hover-problem-causes-the-user-to-double-click-a-link](http://stackoverflow.com/questions/3038898/ipad-iphone-hover-problem-causes-the-user-to-double-click-a-link) they have similar issues — , Dec 14 '11 at 09:19

score 1 · Answer 1 · answered Dec 14 '11 at 09:21

1

This may not be the actual solution...Just giving a thought

$('.classy').die('click').on('click', 'button', function(){ 
    console.log('clicked'); 
})

answered Dec 14 '11 at 09:21

Pavan

4,209
1
22
25

die in jQuery - Remove all event handlers previously attached using .live() from the elements. – bcm Dec 14 '11 at 09:28
This results is the same behavior. Still fires twice, only on touch devices. – fancy Dec 14 '11 at 09:32

score 0 · Answer 2 · answered Dec 14 '11 at 09:07

0

Try changing your binding to mousedown instead of click?

(assuming you're using click)

answered Dec 14 '11 at 09:07

Michael Robinson

29,278
12
104
130

Resulted in the same outcome. – fancy Dec 14 '11 at 09:18

score 0 · Answer 3 · answered Dec 14 '11 at 09:17

0

Perhaps there is another parent element which you have also assigned a click handler. Try this, to prevent the click (or any other event) bubbling up the DOM:

$('.classy').on('click', 'button', function(e){
    console.log('clicked');
    e.stopPropagation();
})

answered Dec 14 '11 at 09:17

Rory McCrossan

331,213
40
305
339

Hrrm, good thought, but the result was the events still firing two times. The confusing part to me is that this only happens on touch devices. If I was accidentally binding two events or creating two instance of the same view it wouldn't it happen for mouse clicks too? – fancy Dec 14 '11 at 09:21

score 0 · Answer 4 · answered Dec 14 '11 at 09:26

0

First thing I'd do to trouble shoot is set a break point using debugger in Chrome/IE/Firefox to make sure the binding does not happen twice.

Or try this:

$('.classy').off('click').on('click', 'button', function(){
    console.log('clicked');
})

answered Dec 14 '11 at 09:26

bcm

5,470
10
59
92

Tried .off and it doesn't work. I dont have any problems on Chrome/IE/Firefox since they are mouse events. The log only happens once. – fancy Dec 14 '11 at 09:31
Looks like Dandroid may have answered in comments. – bcm Dec 14 '11 at 09:33

score 0 · Answer 5 · answered Dec 14 '11 at 09:58

0

You can use jquery's one function instead of click to get rid of double click issues.

answered Dec 14 '11 at 09:58

Amareswar

2,048
1
20
36

But... I need to be able to click that button more then once, and wouldn't it be instead of `on` not `click`? – fancy Dec 14 '11 at 10:02
you can have hover and click events separately instead of click event. In case of touch device hover will be invoked after first touch where as in of others hover call will be invoked. – Amareswar Dec 14 '11 at 10:04
But doesn't .one() only allow the event to be triggered once total? I would have to rebind the event after every click? – fancy Dec 14 '11 at 10:08
1

Yes. If you are using one you should rebind every time. – Amareswar Dec 14 '11 at 10:13

How can I trouble shoot click events being triggered twice?

5 Answers5

Linked