I created this 360 panorama image which is working fine in desktop but on mobile phones the mouse events are not working. How can i fix this for mobile?

// listeners

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

I change the events to

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

but this is not working for mobile.

I created this 360 panorama image which is working fine in desktop but on mobile phones the mouse events are not working. How can i fix this for mobile?

// listeners

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

I change the events to

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

but this is not working for mobile.

• javascript
• events
• mobile
• three.js
• touch

• have you wrote your code within deviceready function? – Priya Rajaram Commented Dec 4, 2015 at 5:12
• i just added tounch events in the mouse events. What is a deviceready functions? – Owais Ahmed Commented Dec 4, 2015 at 5:14
• Can you please explain further what exactly is not working. Usually touch events work on mobiles (Android, Safari, etc). You can also use touchleave because touch event behavior is not uniform among variety of mobile browsers. – domino_katrino Commented Dec 4, 2015 at 5:15
• @domino_katrino can you please check the fiddler example i posted in my question. If you move mouse over the image then you will see mouse effects but when i am trying this on mobile the events are not working – Owais Ahmed Commented Dec 4, 2015 at 5:17
• This event is essential to any application. It signals that Cordova's device APIs have loaded and are ready to access. kindly check the answer below. – Priya Rajaram Commented Dec 4, 2015 at 5:19

2 Answers 2

i found the answer. For touch event.clientX and event.clientY were not working which i have changed to event.touches[0].clientX and event.touches[0].clientY and it fixed the touch event issue.

for mobiles, try like this. you have to use deviceready function for initiation.

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

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

This event is essential to any application. It signals that Cordova's device APIs have loaded and are ready to access.

Cordova consists of two code bases: native and JavaScript. While the native code loads, a custom loading image displays. However, JavaScript only loads once the DOM loads. This means the web app may potentially call a Cordova JavaScript function before the corresponding native code bees available.

The deviceready event fires once Cordova has fully loaded. Once the event fires, you can safely make calls to Cordova APIs. Applications typically attach an event listener with document.addEventListener once the HTML document's DOM has loaded.

The deviceready event behaves somewhat differently from others. Any event handler registered after the deviceready event fires has its callback function called immediately.

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

read this link.

thanks.