鼠标事件在移动设备上不起作用

Question

我创建了这个 360 panorama image，它在桌面上运行良好，但在手机上鼠标事件不起作用。我该如何为移动设备修复此问题？

// 听众

document.addEventListener("mousedown", onDocumentMouseDown, false);
document.addEventListener("mousemove", onDocumentMouseMove, false);
document.addEventListener("mouseup", onDocumentMouseUp, false);

我将事件更改为

document.addEventListener("touchstart", onDocumentMouseDown, false);
document.addEventListener("touchmove", onDocumentMouseMove, false);
document.addEventListener("touchend", onDocumentMouseUp, false);

但这不适用于移动设备。

Answer 1

对于手机，请像这样尝试。你必须使用 deviceready 函数来启动。

document.addEventListener("deviceready", init, false);

function init() {   
    document.querySelector("#yourbuttonId").addEventListener("touchstart", onDocumentMouseDown, false)
}

此事件对于任何应用程序都是必不可少的。它表明 Cordova 的设备 API 已加载并准备好访问。

Cordova 由两个代码库组成：本机和 JavaScript。加载本机代码时，会显示自定义加载图像。但是，JavaScript 仅在 DOM 加载后加载。这意味着网络应用程序可能会在相应的本机代码可用之前调用 Cordova JavaScript 函数。

Cordova 完全加载后将触发 deviceready 事件。一旦事件触发，您就可以安全地调用 Cordova API。一旦 HTML 文档的 DOM 已加载，应用程序通常会使用 document.addEventListener 附加事件侦听器。

设备就绪事件的行为与其他事件略有不同。在 deviceready 事件触发后注册的任何事件处理程序都会立即调用其回调函数。

http://docs.phonegap.com/en/4.0.0/cordova_events_events.md.html#deviceready

阅读此 link。

谢谢。

Answer 2

我找到了答案。由于触摸 event.clientX 和 event.clientY 不工作，我已将其更改为 event.touches[0].clientX 和 event.touches[0].clientY，它修复了触摸事件问题。

鼠标事件在移动设备上不起作用

Mouse events not working in mobile

javascript

mobile

events

touch

three.js