所以...我正在从事一个交互设计项目,我想为内容区域创建一个 sencha 风格的手势滚动。到目前为止,我所做的方法是将触摸移动/开始/结束事件附加到内容区域,并且它会翻译内容。它可以在桌面上使用鼠标移动/向上/向下事件运行,但它会随着触摸而疯狂地跳跃。我不确定出了什么问题......这是原型(prototype)的链接。
**需要 webkit。
http://apps.omorphos.com/gesture-scroll
我认为这是事件响应的问题,但我尝试过但未能确定。非常感谢任何帮助!
最佳答案
所以,我想通了。
我正在做的是将触摸事件附加到列表标记本身..并且,这在带有鼠标事件的桌面上运行良好;但是,通过触摸,目标会发生变化,并且 touchend 无法正确触发。
所以,我所做的,以及我相信 sencha 所做的,...我最初实现的,但走向了不同的方向...是有一个绝对定位的元素,其透明背景色漂浮在该元素上方,该元素将被操纵。所有触摸事件都将被该 DIV 捕获,然后可以在不丢失事件数据的情况下操作下面的元素。
在新版本中我使用了 HammerJs ...更多信息:http://eightmedia.github.io/hammer.js/ 但我很确定你可以只使用标准事件;但是hammer js的好处是它会将触摸事件转换为鼠标事件以便在浏览器中进行测试,这也意味着使触摸的坐标与鼠标相同,因此您可以通过
访问鼠标事件坐标e.gesture.touches[0].pageX
e.gesture.touches[0].pageY
这可以让您编写更少的代码。
第 2 部分:
此外...问题的一部分是...如何单击屏幕下方的内容/组件(例如链接)。
如何做到这一点...是从事件处理程序中获取坐标并通过此 native Javascript 函数传递它们...
var a = document.elementFromPoint(x, y);
这将返回 dom 元素。您所要做的就是触发点击/点击事件。
这会很棒,除了它会选择 z-index 最高的元素.. 所以这就是你的屏幕对象(捕获所有触摸事件的对象)。因此,您需要做的是在注册点击后隐藏屏幕,然后在 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);
});
而且,这就是我解决它的方法! 我的代码没有 super 注释,但您可以在下面的链接中找到它:
关于javascript - 如何重新创建列表和内容的 sencha 风格手势滚动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20603059/