Mouse events not working in 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.

Answers


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 becomes 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.com/en/4.0.0/cordova_events_events.md.html#deviceready

read this link.

thanks.


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.


Need Your Help

Adding View or Button Link to Kendo Grid

asp.net-mvc vb.net razor kendo-grid kendo-ui-grid

After a bit of a struggle I've managed to bind my model to a Kendo Grid in my MVC app. What I want to do now is add either a Html.ActionLink or a button at the end of each row so that when clicked it

Complex heirarchical tree layout

javascript jquery html5 tree d3.js

I need to create an hierarchical tree (something like this), but i need some features: