Detect when touch user pulls finger up in JAVASCRIPT-CodePudding

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();
    });
}

CodePudding user response：

Try to combine also touchcancel event :

  addEventListener( "touchcancel", function ( event ) {
      console.log( "BREAK" );
      restoreButton();
    }, false );

CodePudding user response：

There are several touch events listed as well that may be of use for you, this extends touch devices such as tablets and phones:

  el.addEventListener("touchstart", handleStart, false);
  el.addEventListener("touchend", handleEnd, false);
  el.addEventListener("touchcancel", handleCancel, false);
  el.addEventListener("touchmove", handleMove, false);