“移动狩猎”；吞咽；Backbone.js应用程序中的事件

我遇到了一个奇怪的问题w/a Backbone.js应用程序。在我的主视图中，我希望捕获视图上发生的所有输入事件，并将它们路由到输入处理程序方法。我在视图中还有一些链接可以导航到应用程序的其他部分。相关（咖啡脚本）代码：

---

事件处理在桌面Safari中按预期工作。当我单击“退出”链接时，“onAction\uuuuuu”方法将启动，然后调用“quit”方法。但是，在Mobile Safari上，不会调用“quit”方法。如果我修改触摸事件选择器，使其仅对视图中较小的区域（即，不与链接重叠的元素）作出响应，则它将按预期工作。（所有通过用户输入触发的方法中都包含preventDefault（）调用，但这不应该阻止事件冒泡。）这是一个已知的移动Safari问题吗？

好吧，我最终将“events”对象转化为一个函数，并进行基本的浏览器嗅探，以检测带有触摸屏的平台。将

'click a.quit'：'quit'

转换为

'mouseup a.quit'：'quit'

会被正确调用，即使Safari文档说

如果用户点击一个可点击的元素，事件按以下顺序到达：mouseover、mousemove、mousedown、mouseup和click

以下是我的结果：

    events: ->
        # Determine whether touchscreen or desktop
        agent = navigator.userAgent.toLowerCase()
        if agent.match(/ip(hone|od|ad)/i) or agent.match(/android/i)
            events = 
                'touchend a.quit': 'quit'
                'touchend a.reset': 'reset'
                'touchstart': 'onActionStart'
                'touchmove': 'onActionMove'
                'touchend': 'onActionEnd'
                'onscroll': 'preventDefault'
                'gesturestart': 'preventDefault'
                'gesturechange': 'preventDefault'
                'gestureend': 'preventDefault'
        else 
            events = 
                'click a.quit': 'quit'
                'click a.reset': 'reset'
                'mousedown': 'onActionStart'
                'mouseup': 'onActionEnd'

---

最后，我将“事件”对象转化为一个函数，并进行基本的浏览器嗅探，以检测带有触摸屏的平台。将

'click a.quit'：'quit'

转换为

'mouseup a.quit'：'quit'

会被正确调用，即使Safari文档说

如果用户点击一个可点击的元素，事件按以下顺序到达：mouseover、mousemove、mousedown、mouseup和click

以下是我的结果：

    events: ->
        # Determine whether touchscreen or desktop
        agent = navigator.userAgent.toLowerCase()
        if agent.match(/ip(hone|od|ad)/i) or agent.match(/android/i)
            events = 
                'touchend a.quit': 'quit'
                'touchend a.reset': 'reset'
                'touchstart': 'onActionStart'
                'touchmove': 'onActionMove'
                'touchend': 'onActionEnd'
                'onscroll': 'preventDefault'
                'gesturestart': 'preventDefault'
                'gesturechange': 'preventDefault'
                'gestureend': 'preventDefault'
        else 
            events = 
                'click a.quit': 'quit'
                'click a.reset': 'reset'
                'mousedown': 'onActionStart'
                'mouseup': 'onActionEnd'

---

我的所有方法都将事件作为参数，并调用event.preventDefault（）以停止页面滚动。当我删除该调用时，一切正常，但当我点击并拖动时，页面尝试滚动。修改示例时，我得到了相同的结果：因此

preventDefault

对

touchtstart

和

touchtend

的调用正在吞噬事件。触摸事件被绑定到整个

this.el

，它们将在任何其他事件之前被触发。触摸事件是否需要

preventDefault

？你能将它们隔离到

this.el

中的

中，这样

a.quit

和触摸事件就在DOM的不同分支中吗？是的，这是一个“单屏”移动应用程序，所以我想防止用户在与不阻止默认行为的元素交互时滚动。作为一种临时解决方案，我将触摸/点击处理程序分配给视图中较小的区域，但这意味着如果用户点击/拖动其他区域，视图将尝试滚动。我的所有方法都将该事件作为参数，并调用event.preventDefault（）以停止页面滚动。当我删除该调用时，一切正常，但当我点击并拖动时，页面尝试滚动。修改示例时，我得到了相同的结果：因此

preventDefault

对

touchtstart

和

touchtend

的调用正在吞噬事件。触摸事件被绑定到整个

this.el

，它们将在任何其他事件之前被触发。触摸事件是否需要

preventDefault

？你能将它们隔离到

this.el

中的

中，这样

a.quit

和触摸事件就在DOM的不同分支中吗？是的，这是一个“单屏”移动应用程序，所以我想防止用户在与不阻止默认行为的元素交互时滚动。作为一个临时解决方案，我将触摸/点击处理程序分配给视图中的较小区域，但这意味着如果用户点击/拖动其他区域，视图将尝试滚动。