Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

此代码段显示我已确定＆＃34;＆＃34;如果它是否是触摸屏设备，并根据该信息执行某些操作。（仅当您运行代码段时，请确保单击/点击空白区域以接收输出）

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

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

编辑：

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

Answer 1

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

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

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

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

使用ontouchstart（）或onclick（）取决于设备

1 个答案: