logo标签列表

Backbone.js的点击事件在触摸设备上无法正常工作

javascriptbackbone.jscoffeescript
9
events: 
    'click' : 'select'

在Mobile Safari上使用该事件时，触摸时会触发两次。这是一个已知的错误还是我自己造成的？ 我已经将其更改为：
events: 
    'touchstart' : 'select'

它的效果很好，但这意味着它将不再在普通浏览器中工作。

感谢任何信息。

8个回答
16

试试这段代码：

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

查看示例：http://jsfiddle.net/dira/Ke2px/2/

对我来说没用（控制台没有输出任何内容）。不过骨干事件系统是有效的，因为当我将其更改为“click＃main”时，事件被触发了。 - Nippysaurus
@Nippysaurus，你需要有自己的代码来检测“MOBILE”。 - Mauvis Ledford
3
我使用了Modernizr来检测触摸设备，并且使用了以下代码，这对我起作用了。
events :function(){ 
   return Modernizr.touch ? 
     {
         "touchstart #edit" : "openEdit",
     }: 
     {
         "click #edit" : "openEdit",
     }
 }
3
我已经通用地解决了相同的问题，通过创建backbone.touch for Backbone，它将猴子补丁Backbone.View以响应触摸设备使用时的触摸事件，或正常的单击事件。您可以仅包含源文件，使其转换所有Backbone.Views中的click事件，或者查看代码并自行实现。
2

我定义了这两种事件类型，它们在我的手机和桌面上都可以使用：

events: {
'click' : 'select',
'touchstart' : 'select'
}
3
在触摸设备上，当你轻触时，会触发所有事件：touchstart，touchmove，touchend，mouseover，mousemove，mousedown，mouseup，click。这将导致'select'方法触发两次。请注意，这是翻译后的内容，没有解释或其他额外信息。 - SimplGy
1

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

if ('ontouchstart' in document.documentElement) {
  // 'touchstart': 'select'
} else {
  // 'click': 'select'
}
0
使用CoffeeScript，我会这样做。我从来没有找到理由在现代化时代引入Modernizer，因为现在的移动设备都是触摸设备，你上一次真正需要支持什么设备了吗？
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 更适合这种类型的列表推导式。

0

这对我有用。

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

现在当您测试此功能时，如果设备支持触摸，则 e.type 应为 touchstart 并且只触发一次。 对于无触摸设备上的单击也是同样如此。 如果仍有人正在寻找这个简单的解决方案，请注意。

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接