Mobile devices experiencing issues with mouse events

My 360 panorama image works perfectly on desktop, but I'm having trouble getting the mouse events to work on mobile phones. How can I resolve this issue?

// listeners

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

I tried changing the events to 

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

Unfortunately, this solution is not effective for mobile devices.

javascripteventsmobilethree.jstouch

Answer №1

After some investigation, I was able to discover the solution. It turns out that for touch events, utilizing event.clientX and event.clientY was not working as expected. I made a simple adjustment by changing it to event.touches[0].clientX and event.touches[0].clientY which successfully resolved the issue with touch events.

Answer №2

To optimize for mobile devices, consider following this approach. Utilize the deviceready function for initialization:

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

function initializeApp() {   
    document.querySelector("#yourbuttonId").addEventListener("touchstart", handleTouchStart, false)
}

The deviceready event is crucial for any application as it indicates that Cordova's device APIs have been loaded and are accessible.

Cordova comprises native and JavaScript code bases. The custom loading image displays while the native code loads, but the JavaScript loads only when the DOM is ready. This may lead to potential calls from the web app to a Cordova JavaScript function before the related native code is available.

Upon the complete loading of Cordova, the deviceready event is triggered. Once this event occurs, you can securely make API calls to Cordova. Typically, applications attach an event listener using document.addEventListener once the HTML document's DOM has fully loaded.

The behavior of the deviceready event differs somewhat from other events. Any event handler registered after the deviceready event will have its callback function immediately executed.

For further insights, visit this link.

Take the time to explore the provided resource.

Thank you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Could you provide the parameters for the next() function in Express?

Working with Express.js to build an API has been a game-changer for me. I've learned how to utilize middlewares, handle requests and responses, navigate through different middleware functions... But there's one thing that keeps boggling my mind, ...

javascriptexpressmiddleware

What is the best way to perform a keyword search in AngularJS?

My data consists of code:description pairs (e.g. cmsc100: Web Programming). I have a search box where users can enter either the code or description. Upon clicking the button, the program should display the data that matches the entered code/description or ...

javascriptangularjs

Javascript functions triggering repeatedly

I'm working on creating a fun trivia quiz using JavaScript functions. Each question involves globally defined functions called "right" and "wrong" that are supposed to update the score accordingly. However, I've run into an issue where the quiz s ...

javascript

"Angularjs feature where a select option is left blank as a placeholder, pointing users

Currently, I am working with AngularJS (version < 1.4). When using ng-repeat in select-option, I encounter an extra blank option which is typical in AngularJS. However, selecting this blank option automatically picks the next available option. In my sce ...

javascriptangularjs

developing a monorepo without utilizing a package registry and installing through Bitbucket

My organization is working on creating a monorepo for react components to be used across multiple sites. Currently, we have a repository called react-components on bitbucket and we are looking to convert it into a monorepo using lerna.js, with a structure ...

javascriptgitnpmlernamonorepo

How to build custom middleware with parameters in Node.js

I'm working on creating a middleware in nodejs for access levels, and I've written the following middleware: class AccessUser extends middlware { async AccessUser(access,req, res, next) { const getTokenFrom = (req) => { const autho ...

javascriptnode.jsexpress

Best method for removing CrosshairMove event listener in lightweight charts

As per the documentation, using unsubscribeCrosshairMove allows us to remove a handler that was previously added with subscribeCrosshairMove. Our objective is to use unsubscribe... to eliminate previous handlers before re-subscribing with subscribe... af ...

javascriptlightweight-charts

Is it possible to authenticate both users and admins within the same collection in Mongoose when using Node.js with Express? Can aggregation be used for this purpose?

this is my custom schema const mongoose = require ('mongoose'); const adminSchema = new mongoose.Schema({ name:String, password:String, user:[{ name:String, email:String, password:String } ] }) var ...

javascriptnode.jsmongodbexpressmongoose

A guide on rendering a JSON array received from a URL using AJAX in AngularJS

Upon receiving a JSON array from the following URL: , it appears like this:https://i.stack.imgur.com/1Xrf4.png Within my AngularJS controller, I have the following code: $('#example-1').DataTable({ "ajax" : 'http://blahblahbla ...

javascriptjqueryangularjsjsonajax

Finding elements based on a specific parent structure in JavaScript: A step-by-step guide

I'm currently working on a script that needs to grab content only within a specific parent structure defined as div.main-element input+label+ul. Is there a way to achieve this using JavaScript or jQuery? If anyone could point me in the right directi ...

javascriptjqueryhtml

The Heading I am trying to navigate to is partially obscured by the fixed topbar

I admit my code is quite messy, but this is my first project and I'm still figuring out how to properly structure it. I attempted to use margin with h2::before in CSS, and it sort of worked, but it caused other issues with the text layout. I've h ...

javascripthtmlcss

Switch between 2 buttons by using ng-class in Angular JS

In a button group, one button is designated as "active" by the ng-class attribute (either myCtrl.onactive or myCtrl.offactive) <div class="btn-group pull-right"> <button ng-class="{active: myCtrl.onactive}" class="btn" ng-click="myCtrl.ch ...

javascriptangularjsng-class

Vue.js using the v-for directive with index

Just started using Vue.js and I have a question: I'm working with an array to create a table. When I double click on a table row, I want the program to execute a JavaScript function that will retrieve the selected item based on its index. <di ...

javascriptvue.js

Encountering a 500 server error while trying to send an email using SendGrid in conjunction

Seeking help on integrating an email capture form into a NextJS site by following this tutorial: Simplified the form to only include the email field. The content of my api/contact.js file is as follows: const mail = require('@sendgrid/mail'); ...

javascriptreactjsnext.jssendgrid

Occasionally, there are instances when node.js combined with express.js and hogan.js may result in a blank page being

Most of the time, every feature in this app functions properly. However, there are instances when a blank page is displayed instead of the homepage (or any other page). Interestingly, making a minor adjustment to the affected view, such as adding a space o ...

javascriptnode.jsexpresshogan.js

Clicking on "li" to activate and deactivate

Currently utilizing: $('#btnEmpresarial').attr('onclick','').unbind('click'); In order to deactivate a read using javascript.. However, I now require enabling the onclick after the function has completed. Is ther ...

javascriptjquery

Output the following by using the given format: *a* -> *a1**aabbbaa* -> *a2b3a2*

I am a beginner in JavaScript. Could you please explain how to achieve the following output? * "a" -> "a1" * "aabbbaa" -> "a2b3a2" I attempted using a hash map, but my test cases are failing. Below is the code I have writt ...

javascriptjqueryangularjsreactjsunderscore.js

Dealing with side effects in react/redux: Best practices and tips

Trying to find the best way to integrate an async side-effects handler into my react/redux setup has been quite a challenge. In my react-router-driven application, all the main containers at root level are smoothly dispatching actions and receiving update ...

javascriptreactjstypescriptreduxreact-redux

Setting form values using Angular 9

I am currently facing a challenge that I could use some assistance with. My dilemma involves integrating a new payment system, and I seem to be encountering some obstacles. Here is a snippet of what I have: options: PaystackOptions= { amount: 5000, emai ...

javascriptangularjsangulartypescript

The shown.bs.tab event is causing an issue where the previous active tab cannot be retrieved

Reference from https://getbootstrap.com/docs/4.0/components/navs/#events states that I am utilizing e.relatedTarget in the shown.bs.tab event to retrieve the previous active tab for applying some CSS styles. However, currently, e.relatedTarget is returning ...

javascriptjquerybootstrap-4tabsnavigation