时间戳

首页 > 解决方案 > 检测触摸用户何时在 JAVASCRIPT 中向上拉手指

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

问题描述

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

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

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

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

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

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

我做错了什么？谢谢！

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

标签： javascriptjquerywebbutton

解决方案

尝试结合touchcancel事件：

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

推荐阅读