javascript - 在移动浏览器上长按后鼠标松开事件

Question

我有一个按钮，当按下或按下鼠标事件时，它会发送一个命令。当按钮被释放时，它还应该发送一个命令(据我所知，因为我们没有任何释放事件)，我在按钮上使用鼠标释放事件。当我在计算机浏览器上长按按钮时，鼠标向上事件起作用，但是当我使用移动浏览器时，如果我长按它，则不会触发鼠标向上事件，因为移动浏览器将有文本选择长按功能。有人可以帮我解决这个问题吗？

Answer 1

当用户使用鼠标与您的应用程序交互时，它将通过“单击”事件进行响应，但是当用户使用触摸启用设备并触摸屏幕时，“触摸”和“单击”事件都会发生。对于单点触摸，以下事件将按顺序发生:

1. 触摸开始
2. 触摸移动
3. 触摸结束
4. 鼠标悬停
5. 鼠标移动
6. 鼠标按下
7. 鼠标松开
8. 点击

如果触摸被中断，将会发生另一个“touchcancel”。

当用户触摸屏幕时，鼠标事件也会执行。为了避免这种情况，请使用事件处理程序对象的 PreventDefault() 方法停止触摸事件的默认操作(e.preventDefault()；其中“e”是事件处理程序对象)。

示例:

let timeIn, timeOut;
const touchStart=(e)=>{
   e.preventDefault();
   console.log('touch start');
   timeIn = Date.now();
}

const touchMove=(e)=>{
   e.preventDefault();
   timeOut= Date.now();
   console.log('touch move');
}

const touchEnd=(e)=>{
   e.preventDefault();
   timeOut=((Date.now()-timeIn)/1000).toFixed(2);
   console.log('touch end' , timeOut);
}

const mouseOver=()=>{
  console.log('mouse over');
}
const mouseMove=()=>{
  console.log('mouse move');
}
const mouseUp=()=>{
  console.log('mouse up');
}
const mouseDown=()=>{
  console.log('mouse down');
}
const mouseClick=()=>{
  console.log('mouse click');
}
const touchCancel=(e)=>{
  console.log('touch interrupted')
}

<div
ontouchstart="touchStart(event)"
ontouchmove="touchMove(event)"
ontouchend="touchEnd(event)"
onmouseover="mouseOver(event)"
onmousemove="mouseMove(event)"
onmouseup="mouseUp(event)"
onmousedown="mouseDown(event)"
onclick="mouseClick(event)"
ontouchcancel="touchCancel(event)"
>
touch me 
</div>

要在 codepane 上测试此代码: https://codepen.io/omiGit/pen/MVapRO

有一篇关于触摸和鼠标的好文章，必读:https://www.html5rocks.com/en/mobile/touchandmouse