根据设备使用 ontouchstart() 或 onclick()答案

【问题标题】：use ontouchstart() or onclick() depending on device根据设备使用 ontouchstart() 或 onclick()
【发布时间】：2017-12-10 04:39:16
【问题描述】：

首先，我知道有几种方法可以解决这个问题，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;
}

&lt;h1&gt;&lt;span id="clicks"&gt;&lt;/span&gt;&lt;/h1&gt;

这段代码 sn-p 表明我已经“识别”了它是否是触摸屏设备，并根据该信息执行了一些操作。（仅供参考，当您运行代码 sn-p 时，请确保单击/点击空白区域以接收输出）

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

此外，如果您认为没有办法这样做，是否有更好的方法来根据用户是否有触摸屏或其他设备来检查和执行代码（通过点击或触摸）？

编辑：

我通常只会点击，但页面上的某些项目可能会以很快的速度被点击，或者至少快于 300 毫秒

【问题讨论】：

移动浏览器应在 300 毫秒后触发点击事件； this fiddle 适用于桌面版和移动版 Firefox，因此您的 onclick 属性无论如何都应该有效。也许您正在寻找的是 fastclick 以安全地消除 300 毫秒的延迟。
是的我想快点哈哈，我觉得这正是我需要的，我会研究一下。
但是，如果可能的话，我仍然希望看到一种方法来改进我的上述代码或用更简单的解决方案回答我的问题

标签： javascript html onclick ontouch

【解决方案1】：

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

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

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

但请注意，这非常脆弱，因为事件对象上的数据 — e — 不会传播到点击事件。

【讨论】：