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

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