鼠标事件在移动设备中不起作用答案

【问题标题】：Mouse events not working in mobile鼠标事件在移动设备中不起作用
【发布时间】：2015-12-04 05:04:37
【问题描述】：

我创建了这个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);

但这不适用于移动设备。

【问题讨论】：

您是否在 deviceready 函数中编写了代码？
我刚刚在鼠标事件中添加了触摸事件。什么是 deviceready 函数？
您能否进一步解释究竟是什么不起作用。通常触摸事件适用于手机（Android、Safari 等）。您也可以使用touchleave，因为触摸事件行为在各种移动浏览器中并不统一。
@domino_katrino 请检查我在我的问题中发布的提琴手示例。如果您将鼠标移到图像上，那么您将看到鼠标效果，但是当我在移动设备上尝试此操作时，事件不起作用
此事件对于任何应用程序都是必不可少的。它表示 Cordova 的设备 API 已加载并可以访问。请检查下面的答案。

标签： javascript events mobile three.js touch

【解决方案1】：

对于手机，试试这样。您必须使用 deviceready 功能进行启动。

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

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

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

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

设备就绪事件在 Cordova 完全加载后触发。一旦事件触发，您就可以安全地调用 Cordova API。一旦 HTML 文档的 DOM 加载完毕，应用程序通常会在 document.addEventListener 中附加一个事件监听器。

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

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

阅读此链接。

谢谢。

【讨论】：

感谢 priya，但这不是我想要的，我已经为移动设备创建了事件，但它们无法正常工作
这不是 phonegap 应用程序，我将在移动网络上运行它，因此 javascript 将在移动 DOM 上正常工作，我想你误解了我的问题
你已经创建了init事件来调用mouseevents。我也在做同样的事情，但没有创建任何 init 方法。我试过了，但不工作

【解决方案2】：

我找到了答案。对于触摸 event.clientX 和 event.clientY 不起作用，我已更改为 event.touches[0].clientX 和 event.touches[0].clientY 并修复了触摸事件问题。

【讨论】：