根据设备的不同使用ontouchstart()或onclick()

Question

首先，我知道有几种方法可以解决这个问题，such as使ontouchstart和onclick保持一致。但是，是否有办法检查用户是否有智能手机/平板电脑/触摸屏设备与笔记本电脑或计算机，并将ontouchstart的功能更改为click？下面是一个解决这个问题的方法：

​

var touchScreen = false;
var touches = 0;
var clicks = 0;

document.addEventListener("touchstart", function() {
  touchScreen = true;

  function touch() {
    touches++;
    console.log(touches);
    console.log(clicks);
    document.getElementById("clicks").innerHTML = "touches = " + touches + ", clicks = " + clicks;
  }
  touch();

});

function click() {
  if (touchScreen === false) {
    document.addEventListener("click", function(event) {
      clicks++;
      console.log(touches);
      console.log(clicks);
      document.getElementById("clicks").innerHTML = "touches = " + touches + ", clicks = " + clicks;
    });
  }
}
click();

html {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<h1><span id="clicks"></span></h1>

​

这个代码片段显示，我已经“识别”了它是否是触摸屏设备，并根据这些信息执行了一些操作。(在运行代码片段时，请确保单击/点击空格以接收输出)

但是，我不想这样做，因为我有许多函数依赖于诸如<button onclick="click()">click</button>之类的东西。如果onclick部件是触摸屏设备，我想找一种简单的方法将它更改为ontouchstart。我只在脚本中使用JavaScript，谢谢！

此外，如果您认为没有办法这样做，是否有更好的方法来检查和执行代码(点击或触摸)的基础上，如果用户有一个触摸屏或其他设备？

编辑：

我通常只需要点击，但是页面上的一些项目可能会以快速的速度点击，或者至少比300 of更快。

Answer 1

您可以在click上触发touchstart事件，因此.

document.addEventListener('touchstart', (e) => {
  // prevent duplicate clicks
  e.preventDefault()

  e.target.dispatchEvent(new Event('click'))
))

注意，这是非常脆弱的，因为事件对象- e - will上的数据不会传播到单击事件。

Answer 2

我这样做的方式是，我检查是否'ontouchstart' in window，并根据答案，我要么订阅touchstart或click。

类似于：

if ('ontouchstart' in window) {
  document.addEventListener("touchstart", () => { /*...*/ });
} else {
  document.addEventListener("click", () => { /*...*/ });
}

编辑：在related SO questions上找到更多解决方案。