Backbone.js單擊事件不適用於觸摸

Question

events: 
    'click' : 'select'

在Mobile Safari上使用此事件時，觸摸時會觸發兩次事件。 這是一個已知的bug還是我自己造成的？

我已經把它改成了

events: 
    'touchstart' : 'select'

它工作得很好但意味着它不再適用於普通的瀏覽器。

謝謝你的任何信息。

Answer 1

試試這段代碼：

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

看到它在行動： http ： //jsfiddle.net/dira/Ke2px/2/

Answer 2

我使用Modernizr檢測觸摸設備並使用以下代碼，這對我有用。

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

Answer 3

我通過為Backbone創建backbone.touch來解決同樣的問題，它將使用Backbone.View來修補Backbone.View以在使用觸摸設備時響應觸摸事件，或者在不使用時定期點擊事件。

您可以只包含源文件以使其轉換Backbone.Views中的所有click事件，或者您可以查看代碼並自行實現。

Answer 4

我定義了兩種事件類型，它適用於移動設備和桌面設備：

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

Answer 5

我不熟悉Backbone，但也許嘗試有條件地設置它？

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

Answer 6

我只是包含了jquery touchpunch庫，就是這樣。

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

Answer 7

使用coffeescript，我會做以下事情，我現在找不到引入現代化器的理由，因為現在每個移動設備都是觸摸設備，我的意思是什么時候你最后一次必須真正支持的東西沒有' T'

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讀取這些類型的列表推導imho更好。

Answer 8

這對我有用。

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

現在當你測試這個設備是否觸摸e.type應該是touchstart並且只觸發一次。 點擊非觸摸設備也是如此。 如果有人還在尋找一個簡單的解決方案。