長按移動瀏覽器后的鼠標向上事件

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