Question

我按下按钮或按下鼠标按钮时发送命令。它应该在释放按钮时发送命令（因为我们没有任何发布事件，据我所知），我在按钮上使用鼠标按下事件。当我在计算机浏览器上使用长按按钮时，鼠标按下事件有效，但是当我使用移动浏览器时，如果我长按它就会触发鼠标按下事件，因为移动浏览器会有文本选择长按功能。有人可以帮我这个。

Answer 1

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

touchstart
touchmove
touchend
鼠标悬停
鼠标移动
鼠标按下
鼠标松开
点击

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

在移动浏览器上长按后鼠标按下事件

1 个答案: