mercredi 1 septembre 2021

Detect when touch user pulls finger up in JAVASCRIPT

Sorry if this is a repeated question but i couldn't find any aswers.

Basically, I'm developing a web app that has a button in it.

I want that button to highlight in two different scenarios:

-If the user is on a non-touch (desktop) device, the button will highlight if the mouse is on top of it and get back to normal when it's not.

-If the user is on a touch device WITHOUT a mouse, the button will highlight if it's touched and get back to normal when the touching stops.

The desktop part is working fine, but the touch part have a problem: to get the button back to normal, I have to click somewhere else after clicking it, just stop touching the screen doesn't work.

What I'm doing wrong? Thanks!

JS Code:

if (!this.isTouch) {
  document.getElementById("search_button").addEventListener("mouseover", function () {
    highlightButton();
  });
  document.getElementById("search_button").addEventListener("mouseout", function() {
    restoreButton();
  });
}
else if (window.matchMedia("(any-pointer: none)").matches) {
  document.getElementById("search_button").addEventListener("touchstart", function () {
    highlightButton();
    });
  document.getElementById("search_button").addEventListener("touchend", function () {
      restoreButton();
    });
}



Aucun commentaire:

Enregistrer un commentaire