Backbone.js 点击事件不适用于触摸答案

【问题标题】：Backbone.js click event doesn't work with touchBackbone.js 点击事件不适用于触摸
【发布时间】：2011-12-11 07:11:23
【问题描述】：

events: 
    'click' : 'select'

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

我已经把它改成了

events: 
    'touchstart' : 'select'

它工作得很好，但意味着它不再在普通浏览器中工作了。

感谢您提供任何信息。

【问题讨论】：

标签： javascript backbone.js coffeescript

【解决方案1】：

这对我有用。

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

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

【讨论】：

【解决方案2】：

使用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 更适合这些类型的列表理解恕我直言。

【讨论】：

【解决方案3】：

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

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

【讨论】：

这将触发 'select' 方法两次，因为当您点击触摸设备时，它会触发所有事件： touchstart touchmove touchend mouseover mousemove mousedown mouseup click

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

我已经通过创建backbone.touch for Backbone 解决了同样的问题，它将猴子修补 Backbone.View 以在使用触摸设备时响应触摸事件，或者在不使用触摸设备时响应常规点击事件。

您可以只包含源文件以使其转换 Backbone.Views 中的所有 click 事件，也可以查看代码并自行实现。

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

试试这个代码：

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

查看实际操作：http://jsfiddle.net/dira/Ke2px/2/

【讨论】：

对我不起作用（在控制台中没有看到任何输出）。主干事件系统正在工作，因为当我将其更改为“单击#main”时触发了该事件。
@Nippysaurus 你需要有自己的代码来检测MOBILE。

【解决方案8】：

我对 Backbone 不熟悉，但也许可以尝试有条件地设置它？

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

【讨论】：