Backbone.js click event doesn't work with touc

Question

events: 
    'click' : 'select'

When using this event on Mobile Safari the event gets triggered twice when touched. Is this a known bug or something that I am causing on my own?

I've since changed it to

events: 
    'touchstart' : 'select'

and it works great but means that it will not work in normal browsers anymore.

Thanks for any info.

Answer 1

I have used Modernizr to detect the touch device and used following code and this worked for me.

events :function(){ 
   return Modernizr.touch ? 
     {
         "touchstart #edit" : "openEdit",
     }: 
     {
         "click #edit" : "openEdit",
     }
 }

Answer 2

I just include the jquery touchpunch library and that's it.

https://github.com/furf/jquery-ui-touch-punch

Answer 3

I've solved the same issue generically by creating backbone.touch for Backbone that will monkey patch Backbone.View to respond to touch events when a touch device is used, or regular click events when not.

You can either just include the source file to have it transform all of your click events in Backbone.Views, or you can take a peek at the code and implement it yourself.

Answer 4

I defined both events types and it works for me on a mobile and desktop:

events: {
'click' : 'select',
'touchstart' : 'select'
}

Answer 5

this worked for me.

events:{
  'click #edit':'select',
  'touchstart #edit':'select'
},
select: function(e){
  e.stopPropagation();
  e.preventDefault();
  console.log('open upload dialog ', e.type);
}

now when you test this if the device is touch e.type should be touchstart and only fire once. Same for click on no-touch device. In case anybody is still looking for a simple solution for this.

Answer 6

I'm not familiar with Backbone, but maybe try setting it conditionally?

if ('ontouchstart' in document.documentElement) {
  // 'touchstart': 'select'
} else {
  // 'click': 'select'
}