如何为列表和内容重新创建 sencha 风格的手势滚动？

Question

所以...我正在做一个交互设计项目，我想为内容区域创建一个煎茶风格的手势滚动。到目前为止，我所做的方式是将 touchmove/start/end 事件附加到内容区域，它翻译的是内容。它可以在带有 mousemove/up/down 事件的桌面上运行，但它会像触摸一样疯狂地跳来跳去。我不确定出了什么问题.. 这是原型的链接。

**需要 webkit。

http://apps.omorphos.com/gesture-scroll

我认为这是事件响应的问题，但我尝试过但无法确定。非常感谢任何帮助！

Answer 1

所以，我想通了。

我正在做的是将触摸事件附加到列表标签本身..并且，这在带有鼠标事件的桌面上运行良好；但是，通过触摸，目标会发生变化，并且 touchend 无法正常触发。

所以，我所做的，以及我相信 sencha 所做的，......我最初实现了但朝不同的方向发展......有一个绝对定位的元素，透明背景颜色漂浮在元素上方，它将被操纵。所有的触摸事件都将被该 DIV 捕获，然后可以在不丢失事件数据的情况下操作下面的元素。

在新版本中我使用了 HammerJs ...更多信息：http://eightmedia.github.io/hammer.js/ 但我很确定你可以只使用标准事件；但是hammer js的好处是它会将触摸事件转换为鼠标事件以便在浏览器中进行测试，这也意味着使触摸的坐标与鼠标相同，因此您可以通过

访问鼠标事件坐标

e.gesture.touches[0].pageX
e.gesture.touches[0].pageY

这可以让您编写更少的代码。

第 2 部分：

另外...问题的一部分是...您如何单击屏幕下方的内容/组件（例如链接）。

你是怎么做的……你是从事件处理程序中获取坐标并通过这个原生 Javascript 函数传递它们……

var a = document.elementFromPoint(x, y);

这将返回 dom 元素。你所要做的就是触发点击/点击事件。

这很好，除了它会选择具有最高 z-index 的元素.. 这就是你的屏幕 obj（捕获所有触摸事件的那个）。所以，你需要做的是，在点击注册后隐藏屏幕，然后在 200ms 后执行这个函数，然后把屏幕带回来捕捉任何事件。

你可以用这个函数做到这一点...

$(theScreen).on('tap', function(e){
    screen.hide();
    var hit = document.elementFromPoint(e.gesture.touches[0].pageX, e.gesture.touches[0].pageY);
    $(hit)[0].tagName !=="A" || $(hit).trigger('click');
    setTimeout(function(){screen.show()},300);
});

而且，我就是这样解决的！ 我的代码没有超级注释，但是你可以在下面的链接中找到它：

更新示例： http://apps.omorphos.com/gesture-scroll/v2/