在 JAVASCRIPT 中检测触摸用户何时向上拉手指

Question

抱歉，如果这是一个重复的问题，但我找不到任何答案。

基本上，我正在开发一个包含按钮的网络应用程序。

我希望该按钮在两种不同的情况下突出显示：

-如果用户使用的是非触摸（桌面）设备，如果鼠标在其上，按钮将突出显示，否则会恢复正常。

-如果用户在没有鼠标的触摸设备上，按钮将在触摸时突出显示，并在触摸停止时恢复正常。

桌面部分没问题，但是触摸部分有问题：要让按钮恢复正常，我点了之后要点别的地方，停止触摸屏幕不行。

我做错了什么？谢谢！

JS代码：

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

Answer 1

也尝试结合 touchcancel 事件：

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

Answer 2

还列出了几个可能对您有用的触摸事件，这扩展了平板电脑和手机等触摸设备：

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

在 MDN docs

阅读更多内容

在 JAVASCRIPT 中检测触摸用户何时向上拉手指

Detect when touch user pulls finger up in JAVASCRIPT

javascript

jquery

button

web