How can we ensure that pointer events return the same coordinates as touch events when the viewport is zoomed in?

Question

How can we ensure that pointer events return the same coordinates as touch events when the viewport is zoomed in?

I attempted to utilize pointer events (such as pointerdown) instead of using a combination of touch events (e.g. touchstart) and mouse events (e.g. mousedown) to determine the input event coordinates.

var bodyElement = document.body;

bodyElement.addEventListener("touchstart", function(e) {console.log("touch: " + e.changedTouches[0].clientX + " " + e.changedTouches[0].clientY);});
bodyElement.addEventListener("pointerdown", function(e) {console.log("point: " + e.clientX + " " + e.clientY);});

Everything works correctly until the viewport is zoomed in (e.g. android chrome zooming the webpage, device toolbar zoom factor other than 100% in chrome's dev tools...). At that point, the pointer events start reporting inaccurate values.

You can see the issue in the screenshots below:

1) Viewport scaled to 100%, click on a 300px*300px div at the bottom right corner:

2) Viewport scaled to 150%, click on a 300px*300px div at the bottom right corner:

Is there a solution for obtaining correct coordinates from pointer events?

Edit:
Added jsfiddle: jsfiddle

javascript html google-chrome mobile pointer-events

Answer 1

Answer №1

Instead of targeting the body, focus on reaching the specific div to avoid any changes in its orientation.

Consider trying out this approach:

const dostuffwithdiv = () =>{
  var u = document.getElementById('uniqueDiv');

  u.addEventListener("touchstart", e=> {
    var rect = e.target.getBoundingClientRect();
    var x = e.targetTouches[0].pageX - rect.left;
    var y = e.targetTouches[0].pageY - rect.top;
    var msg = `touch: ${x} ${y}`;
    console.log(msg);
  });
  u.addEventListener("pointerdown", e=> {
    var rect = e.target.getBoundingClientRect();
    var x = e.clientX - rect.left;
    var y = e.clientY - rect.top;
    var msg = `point: ${x} ${y}`;
    console.log(msg);
  });
}

document.onreadystatechange = dostuffwithdiv(); //due to jsfiddle environment
//you may want to handle this differently on a real frontend:
//document.addEventListener("DOMContentLoaded", dostuffwithdiv);

Although the fiddle below is set up differently at the bottom due to jsfiddle's internal workings, it still serves as a useful example. Feel free to ask if you need further clarification.

https://jsfiddle.net/L3tbsyax/42/

Answer 2

Instead of targeting the body, focus on reaching the specific div to avoid any changes in its orientation.

Consider trying out this approach:

const dostuffwithdiv = () =>{
  var u = document.getElementById('uniqueDiv');

  u.addEventListener("touchstart", e=> {
    var rect = e.target.getBoundingClientRect();
    var x = e.targetTouches[0].pageX - rect.left;
    var y = e.targetTouches[0].pageY - rect.top;
    var msg = `touch: ${x} ${y}`;
    console.log(msg);
  });
  u.addEventListener("pointerdown", e=> {
    var rect = e.target.getBoundingClientRect();
    var x = e.clientX - rect.left;
    var y = e.clientY - rect.top;
    var msg = `point: ${x} ${y}`;
    console.log(msg);
  });
}

document.onreadystatechange = dostuffwithdiv(); //due to jsfiddle environment
//you may want to handle this differently on a real frontend:
//document.addEventListener("DOMContentLoaded", dostuffwithdiv);

Although the fiddle below is set up differently at the bottom due to jsfiddle's internal workings, it still serves as a useful example. Feel free to ask if you need further clarification.

https://jsfiddle.net/L3tbsyax/42/

Answer 3

Answer №2

After spending some time experimenting, I realized that getting this to work was quite challenging due to recent changes in Chrome's behavior. Despite my limited knowledge, I managed to come up with a solution that closely mimics the functionality you were looking for:

In the HTML code below, I made sure to remove the border that was causing complications and could potentially add extra complexity later on.

<body style="margin:0; padding: 0;">
    <div id="uniqueDiv" style="width:300px;height:300px;background-color: black;"></div>
</body>

For the JavaScript part, here is what I came up with:

const handleDivEvents = () =>{
  var divElement = document.getElementById('uniqueDiv');

  divElement.addEventListener("touchstart", e=> {
    var rect = e.target.getBoundingClientRect();
    var x = e.targetTouches[0].clientX - rect.left;
    var y = e.targetTouches[0].clientY - rect.top;
    var msg = `Touch Event: ${x} ${y}`;
    console.log(msg);
  });
  divElement.addEventListener("mouseup", e=> {
    var msg = `Pointer Event: ${e.clientX} ${e.clientY}`;
    console.log(msg);
  });
}

// Run the function once the document has finished loading
document.onreadystatechange = handleDivEvents();

You can view the working example here.

Answer 4

After spending some time experimenting, I realized that getting this to work was quite challenging due to recent changes in Chrome's behavior. Despite my limited knowledge, I managed to come up with a solution that closely mimics the functionality you were looking for:

In the HTML code below, I made sure to remove the border that was causing complications and could potentially add extra complexity later on.

<body style="margin:0; padding: 0;">
    <div id="uniqueDiv" style="width:300px;height:300px;background-color: black;"></div>
</body>

For the JavaScript part, here is what I came up with:

const handleDivEvents = () =>{
  var divElement = document.getElementById('uniqueDiv');

  divElement.addEventListener("touchstart", e=> {
    var rect = e.target.getBoundingClientRect();
    var x = e.targetTouches[0].clientX - rect.left;
    var y = e.targetTouches[0].clientY - rect.top;
    var msg = `Touch Event: ${x} ${y}`;
    console.log(msg);
  });
  divElement.addEventListener("mouseup", e=> {
    var msg = `Pointer Event: ${e.clientX} ${e.clientY}`;
    console.log(msg);
  });
}

// Run the function once the document has finished loading
document.onreadystatechange = handleDivEvents();

You can view the working example here.

How can we ensure that pointer events return the same coordinates as touch events when the viewport is zoomed in?

Answer №1

Answer №2

Similar questions

Is there a way to immobilize an object in JavaScript without resorting to Object.freeze()?

Error: Missing 1 type argument(s) in generic type definition

Could it be that the function is returning undefined because console.log is executing before the result is actually returned? Perhaps a promise

Guide on dynamically displaying a page based on the response from express/mssql middleware

Using multiple `setState` calls without synchronization can lead to issues, especially when one of them uses a value obtained from `

Is it possible to single out the final element having a specific CSS class in the absence of a parent container?

What are some strategies for dividing a webpage evenly between an image and a text-containing div?

Troubleshooting Rails 4: Handling a 404 Not Found Error When Making an AJAX Call to a

Is your Ajax response suddenly failing to work after the initial attempt?

I'm confused as to why only one of my HTML pages is accepting my CSS styling - not sure what's going on

Is there a way to customize the color of a MUI styled component?

What is the reason behind WP AJAX consistently returning a value of 0?

Ensuring the authenticity of user login credentials

Get only the text content from a hyperlink using Tinymce-4

Creating a concise TypeScript declaration file for an established JavaScript library

Looking to showcase initial API data upon page load without requiring any user input?

Modifying the value of a variable causes a ripple effect on the value of another variable that had been linked to it

How to programmatically clear an input field in Angular using Bootstrap's typeahead feature

What is the best way to toggle and slide two forms within a single page?

The system has detected an invalid NSStringEncoding value of 0x8000100 while converting NSAttributedString to HTML