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

【问题标题】：Detect when touch user pulls finger up in JAVASCRIPT检测触摸用户何时在 JAVASCRIPT 中向上拉手指
【发布时间】：2021-10-30 15:15:16
【问题描述】：

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

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

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

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

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

桌面部分工作正常，但触摸部分有问题：要让按钮恢复正常，我必须在点击后点击其他地方，停止触摸屏幕不起作用。

我做错了什么？谢谢！

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

【问题讨论】：

标签： javascript jquery web button

【解决方案1】：

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

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

阅读更多MDN docs

【讨论】：

【解决方案2】：

也尝试结合touchcancel事件：

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

【讨论】：

在日志中打印每个用户操作是正常的做法吗？抱歉，我刚开始做 Web 开发
console.log 仅供开发人员轻松查看实际发生的情况。最好的方法是在生产中删除 console.log 。我建议您也可以在程序停止的断点处使用断点/调试器，然后您可以检查当前的本地范围或将一些变量添加到监视列表。在谷歌上查找谁在 chrome 中使用调试器。 console.log 可以调试器是检测错误或应用程序流的终极工具。如果你有 Windows 但你想在 iOS 上调试而不是使用 alert(" MY VAR IS = " + someVar ) 它是这种情况下唯一的解决方案。
当您修复部分代码然后删除console.log 循环也是console.log 最危险的地方不要忘记！如果您有很多迭代，Easy 可以冻结您的浏览器...