pc端和移动端鼠标事件,实现与微信按住说话差不多的按键

最新推荐文章于 2025-09-15 17:06:24 发布

原创

最新推荐文章于 2025-09-15 17:06:24 发布 · 893 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html5

本文介绍了如何使用移动端的touch事件和PC端的mouse事件来实现一个按住说话的功能。通过监听touchstart、touchmove、touchend以及mousedown、mouseup、mousemove事件，动态改变按钮的提示信息，并根据手指或鼠标移动的距离判断是否发送消息。在移动端，当手指移动距离小于200px时发送成功，大于则取消；在PC端，鼠标移动超过30px时取消发送，否则发送成功。

1、移动端：

事件类型：

touchstart : 触摸开始（手指放在触摸屏上）

touchmove : 拖动（手指在触摸屏上移动）

touchend : 触摸结束（手指从触摸屏上移开）

直接上栗子，做一个简单的按住说话，移开一定距离提示松开取消：

<input type="button" name="" id="messageBtn" value="按住 说话" />

js：

initEvent() {
      var btnElem = document.getElementById("messageBtn"); 
      var posStart = 0; //初始化起点坐标
      var posEnd = 0; //初始化终点坐标
      var posMove = 0; //初始化滑动坐标

      btnElem.addEventListener("touchstart", function(event) {
        console.log(event);
        event.preventDefault();
        posStart = 0;
        posStart = event.touches[0].pageY; //获取起点坐标
        btnElem.value = "松开 结束";
        console.log("start");
      });
      btnElem.addEventListener("touchmove", function(event) {
        event.preventDefault();
        posMove = 0;
        posMove = event.targetTouches[0].pageY; //获取滑动实时坐标
        if (posStart - posMove < 200) {
          btnElem.value = "松开 结束"

最低0.47元/天解锁文章