javascript - 如何重新创建列表和内容的 sencha 风格手势滚动?

标签 javascript jquery web-applications extjs sencha-touch

所以...我正在从事一个交互设计项目,我想为内容区域创建一个 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 注释,但您可以在下面的链接中找到它:

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

关于javascript - 如何重新创建列表和内容的 sencha 风格手势滚动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20603059/

相关文章:

javascript - 为什么 "[] + {} === {} + []"评估为 "true"?

javascript - InstancedBufferGeometry 的 PhongMaterial

jquery - 获取元素的其他或所有类别

security - 不使用 cookie 的 "remember my device"的替代实现?

web-applications - 您如何进行 Web 应用程序 (SaaS) 的发布管理?

javascript - iframe 是否可以在没有主窗口帮助的情况下自行调整大小?

javascript - 在构造函数的方法中替代 'this.variable'

javascript - HTML:在图像和视频上显示透明封面

javascript - 为什么我的 jquery 删除列表中的第一个元素而不是指定的元素?

javascript - 在 Google 脚本中访问电子表格