长按移动浏览器后的鼠标向上事件

Question

我有一个按钮，当按下按钮或鼠标按下事件时会发送命令。 当按钮被释放时，它也应该发送一个命令（据我所知，因为我们没有任何释放事件），所以我在按钮上使用了鼠标向上事件。 当我从计算机浏览器中长按按钮时，鼠标向上事件有效；但是当我使用移动浏览器时，如果长按它，则不会触发鼠标向上事件，因为移动浏览器将具有文本选择功能长按功能。 有人可以帮我这个忙吗？

Answer 1

当用户使用鼠标与您的应用程序交互时，它将通过“单击”事件做出响应，但是当用户使用触摸启用设备并触摸屏幕时，将同时发生“触摸”和“单击”事件。 对于单点触摸，将依次发生以下事件：

1. 触摸开始
2. 触摸移动
3. 触摸端
4. 鼠标移到
5. 鼠标移动
6. 按下鼠标
7. 鼠标向上
8. 点击

如果触摸中断，则会发生另一次“触摸取消”。

当用户触摸屏幕时，鼠标事件也会执行。 为避免这种情况，请使用事件处理程序对象的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> 

要在代码窗格上测试此代码，请执行以下操作： https ://codepen.io/omiGit/pen/MVapRO

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