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

Question

I have a button when pressed or on mouse-down event on it sends a command. It should also send a command when the button is released(as we don't have any release event, to my knowledge), I am using mouse-up event on the button. When i use the long press on the button from computer browser the mouse-up event works, But when i use mobile browser, if i do a long press on it the mouse up event is not fired, as the mobile browser will have text selection feature on long press. Could some one help me with this.

Answer 1

When the user interacts with your application using a mouse, it will respond via 'click' event, but when the user uses touch enable devices and touches the screen both 'touch' and 'click' event will occur. for the single touch following events will occur in order :

1. touchstart
2. touchmove
3. touchend
4. mouseover
5. mousemove
6. mousedown
7. mouseup
8. click

one other 'touchcancel' will occur if the touch is interrupted.

When the user touches the screen, mouse events also executes. To avoid this, stop the default actions of touch events using preventDefault() method of event handler object,(e.preventDefault(); where 'e' is the event handler object).

Example :

 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> 

To test this code on codepane : https://codepen.io/omiGit/pen/MVapRO

There is a good article on touch and mouse, must read: https://www.html5rocks.com/en/mobile/touchandmouse