Kinetics JS“点击”或移动设备的简单“触摸”事件

Question

我正在使用 kinetic-v4.3.0-beta2.js

我想为 ios 和 android 处理组上的移动触摸事件。

我正在绑定如下事件

group.on('touchstart', function (evt) {

    $('#onpopMenu').popup("open", { x: leftPosition, y: topPosition });

});

我尝试了“touchend”、“touchstart”和“tap”

在“点击”中获得了部分成功，但在这种情况下，形状是可拖动的，因此点击事件不会正确触发，因为对象会从它的位置移动。

但如果形状不可拖动，那么它会正常工作。

我也尝试了“touchend”和“touchstart”事件，但在 iOs 和 android 中的事件触发后弹出菜单关闭，因为我正在通过 Touching 组打开 Jquery Mobile Popup！

当触发 touchstart 事件时，弹出菜单只会打开 2-3 秒。

有人在动态 JS Mobile 事件中遇到过同样的问题吗？如何只处理“点击”或“触摸”事件。

我检查了这个http://www.html5canvastutorials.com/kineticjs/html5-canvas-mobile-events/ 以供参考，但没有运气！

我正在使用 Phonegap + JQM + Kinetics JS 开发应用程序

提前致谢！

Answer 1

请记住，您的应用程序是在 webview 中运行的。这就是为什么你在触摸/点击事件上有 2/3 秒的延迟。 这就是为什么在我所有的 PhoneGap 开发中，我都使用 Fastclick.js。 FastClick 是一个简单易用的库，用于消除移动浏览器上物理点击和点击事件触发之间的 300 毫秒延迟。目的是让您的应用程序感觉更少滞后和更灵敏，同时避免对您当前逻辑的任何干扰。 你可以在这里找到它https://github.com/ftlabs/fastclick。 它易于使用（如果您使用的是 jQuery）：

<script type='application/javascript' src='/path/to/fastclick.js'></script>
<script>
    $(function() {
        FastClick.attach(document.body);
    });
</script>

Answer 2

我为你创建了一个jsfiddle 来测试点击/触摸事件。

据我了解，您有一个 Kinetic.Group 节点，即 draggable，但您想使用 jquery mobile 打开一个弹出窗口。

您是对的，当您拖动一个对象时，tap 事件不会触发。但是您说如果形状不可拖动，则 tap 事件可以正常工作。这让我相信：

1. 您想在“点击”时弹出一个窗口
2. 你想要一个关于“dragend”的弹出窗口

如果是这样，您只需要像这样使用这两个事件：

group.on('tap dragend', function (evt) {
  $('#onpopMenu').popup("open", { x: leftPosition, y: topPosition });
});

如果我的假设有误，请告诉我，我可以与您一起找到正确的解决方案。我猜你什么时候想弹出，所以如果你让我知道你想要弹出的确切时间，那会很有帮助。

您可能还想考虑使用 evt.cancelBubble = true; http://www.html5canvastutorials.com/kineticjs/html5-canvas-cancel-event-bubble-propagation-with-kineticjs/