Javascript 如何为列表和内容重新创建sencha样式的手势滚动？

所以。。。我正在进行一个交互设计项目，我想为内容区域创建一个sencha风格的手势滚动条。到目前为止，我所采用的方法是将touchmove/start/end事件附加到内容区域，并将其转换为内容。它可以在桌面上使用mousemove/up/down事件，但它可以通过触摸疯狂地跳跃。我不确定出了什么问题。。这里是一个原型的链接

**需要webkit

---

我认为这是一个事件反应的问题，但我试过了，但没能确定下来。非常感谢您的帮助

所以，我找到了答案

我所做的是将触摸事件附加到列表标签本身。。而且，这在桌面上可以很好地处理鼠标事件；但是，使用触控时，目标会发生变化，触控端无法正常发射

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

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

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

这样就可以编写更少的代码

第2部分：

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

你是怎么做到的。。。就是从事件处理程序获取coords并通过本机Javascript函数传递它们

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

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

这很好，不过它会选择z索引最高的元素。。这就是你的屏幕对象——捕捉所有触摸事件的对象。因此，您需要做的是，在点击注册后隐藏屏幕，然后在200毫秒后执行此功能，然后返回屏幕以捕获任何事件

您可以使用此函数来完成此操作

$(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);
});

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

更新示例：

---

更新的示例：不使用safari和Chrome中测试的键盘手势。我很久以前就发现了这一点，但我的版本远不如IScroll，因此从那以后，我一直在所有项目中使用IScroll。