touch - iPad 上的 Kinetic JS touchstart/touchend 混淆

标签 touch kineticjs touchstart

我无法调试此问题:如果您在 iPad 上查看此 jfiddle,您会发现可以单击每个圆圈来更改上面的内容。当您按住一个圆圈时,您会看到它变成绿色(图像交换)。

http://jsfiddle.net/SWj9m/

现在,用一根手指按住其中一个,然后向上拖动手指,或者在按住前一个手指的同时用另一根手指单击另一个戒指。现在,iPad 触摸事件变得困惑,绿色(touchstart)事件保持在原位而不是离开。我们最终会看到多个圆圈呈绿色,这意味着 touchend 事件从未发生。

有人以前见过这个问题或者知道如何进行调试吗?

此片段显示触摸开始/结束事件

                    applications.on('touchstart mouseover', function() {
                        writeMessage(messageLayer, 'touchstart applications circle');
                        this.setFill({ image: images.applicationshover});
                        layer.draw();
                    });
                    applications.on('touchend mouseout', function() {
                        writeMessage(messageLayer, 'Mouseup applications circle');
                        this.setFill({ image: images.applicationsimage});
                        layer.draw();
                    });

最佳答案

我对kineticjs还算不上初学者,但我会尝试一下,因为这个问题已经有一段时间没有得到解答了。

不幸的是,触摸和鼠标事件并不像您希望的那样相互平行。 “touchstart”类似于“mousedown”而不是“mouseover”,“touchend”类似于“mouseup”而不是“mouseout”。我在自己的一些代码中遇到了类似的问题。

我对此的最佳想法是使用“mouseover”和“touchmove”,它们似乎是类似的。在任何环中进行鼠标悬停/触摸移动或鼠标按下/触摸启动时,将该环设置为绿色,并将所有其他环设置回蓝色。另外,在 mouseup/touchend 上将所有环设置为蓝色。

当用户触摸外环,然后移到背景,然后结束触摸时,仍然留下一种情况未处理。在桌面上,您可以使用“鼠标悬停”来处理该问题,但在 iPad 上则没有“触摸悬停”来执行相同的操作。在类似情况的代码中,我添加了 window.touchend 的监听器。我还没有尝试过,但我的另一个想法是有一个带有舞台大小的矩形的图层作为背景图层,并观察该对象上发生的 touchend。

如果这不是解决这个问题的最佳方法,那么希望真正知道自己在说什么的人会介入来纠正我!

关于touch - iPad 上的 Kinetic JS touchstart/touchend 混淆,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13925547/

相关文章:

jquery - 使用 touchstart 关闭 iphone/ipad 上的 jQuery Tools 工具提示

JavaScript onTouch 不工作

ios - 如何在不增加ios中按钮大小的情况下扩大可点击区域

Android - 如何让两个 View 接收并执行相同的触摸事件?

javascript - 使用带有 kineticJs 的 jquery 可拖动 UI 使元素对齐网格?

javascript - KineticJS:应用过滤器后图像没有描边

javascript - 如何调试适用于我的桌面但不适用于我的手机的 Javascript?

javascript - 在kinetic js中拖动一个形状也会移动一个不相关的形状

javascript - touchstart 处理程序在 iframe 中包装时会弄乱文本输入的焦点

javascript - touchstart 无法再滚动