javascript Backbone.js 单击事件不适用于触摸

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7828054/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 01:28:17  来源:igfitidea点击:

Backbone.js click event doesn't work with touch

javascriptbackbone.jscoffeescript

提问by fancy

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?

在 Mobile Safari 上使用此事件时,事件会在触摸时触发两次。这是一个已知的错误还是我自己造成的?

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.

感谢您提供任何信息。

回答by dira

Try this code:

试试这个代码:

TouchView = Backbone.View.extend({
  events: function() {
    return MOBILE ? 
       {
         "touchstart": 'select'
       } : 
       {
         "mousedown": 'select'
       }
  }
}

See it in action: http://jsfiddle.net/dira/Ke2px/2/

看到它在行动:http: //jsfiddle.net/dira/Ke2px/2/

回答by Dinoop mathew

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

我使用 Modernizr 来检测触摸设备并使用以下代码,这对我有用。

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

回答by Nervetattoo

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

我通过为 Backbone创建Backbone解决了同样的问题它会在使用触摸设备时修补 Backbone.View 以响应触摸事件,或者在不使用时响应常规点击事件。

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

您可以只包含源文件,让它click在 Backbone.Views 中转换您的所有事件,或者您可以查看代码并自己实现它。

回答by araghorn

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

我定义了两种事件类型,它适用于移动设备和桌面设备:

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

回答by Kai

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

我不熟悉 Backbone,但也许可以尝试有条件地设置它?

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

回答by ReduxDJ

Using coffeescript, I'd do the following, I don't ever find a reason to bring in modernizer when every mobile device these days is really a touch device, I mean when was the last time you had to really support something that didn't?

使用coffeescript,我会做以下事情,当现在每个移动设备都是触摸设备时,我永远找不到理由引入现代化器,我的意思是你最后一次必须真正支持那些没有的东西'吨?

window.isTouchDevice =  (/android|webos|iphone|ipod|ipad|blackberry|iemobile/i.test(navigator.userAgent.toLowerCase()) )

  events: ->
    for k, v of this when /click/.test(k) and isTouchDevice
      mobileKey = k.replace('click','touchstart')
      events[ mobileKey ] = v
      delete events[ k ]
    return events

Coffeescript reads better for these type of list comprehensions imho.

恕我直言,对于这些类型的列表理解,Coffeescript 读起来更好。

回答by nosh247

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.

现在当你测试这个设备是否是触摸 e.type 应该是 touchstart 并且只触发一次。单击非触摸设备也是如此。如果有人仍在为此寻找简单的解决方案。

回答by dombesz

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

我只包含 jquery touchpunch 库,仅此而已。

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

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