移动Safari上的可持有html按钮[重复]

Question

我有一个简单的网络按钮

<button id="awesome" style="height:150px; width:500px"></button>

并且在桌面上使用 safari，我可以使用 . . .

document.getElementById('awesome').onmousedown = function() {
    responding = true;
//  console.log("on");
};

document.getElementById('awesome').onmouseup = function() {
    responding = false;
//  console.log("off");
};

但是当我在 iPhone 上的 Safari 上运行它时，按住按钮会出现复制粘贴菜单，但我没有得到我想要的行为。我应该修改什么以获得跨平台的相同预期响应？

Answer 1

因为手机没有鼠标。移动浏览器会模拟一些事件，只是为了为尚未针对移动使用进行优化的网站（例如点击事件）提供良好的体验，但您提到的两个事件并未被模拟。

您需要在移动设备上使用触摸事件：https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

有几种方法可以解决这个问题：

1. 寻找为您进行事件绑定的库，那里可能有几个

2. 检测环境并绑定一组事件或另一组。

3. 绑定到触摸和鼠标事件。如果要模拟您要使用的鼠标事件，您可以依赖该事件的模拟，或者在适当的触摸事件中使用preventDefault() 和stopPropagation 来停止在移动设备上触发鼠标事件。

Answer 2

为什么不试试ontouchstart 和ontouchend 事件呢？
ontouchstart MDN page
ontouchend MDN page