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

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 = "松开 结束";
        } else {
          btnElem.value = "松开手指，取消发送";
        }
      });
      btnElem.addEventListener("touchend", function(event) {
        event.preventDefault();
        posEnd = 0;
        posEnd = event.changedTouches[0].pageY; //获取终点坐标
        btnElem.value = "按住 说话";
        console.log("End");
        if (posStart - posEnd < 200) {
          console.log("发送成功");
        } else {
          console.log("取消发送");
          console.log("Cancel");
        }
      });
    }

2、在pc端的鼠标事件：

mousedown：按下鼠标后触发

mouseup： 松开鼠标后触发

mousemove：移动鼠标时触发

与上面栗子一样：

<div class="send-text">
    <input type="button" name="" id="messageBtn" value="按住 说话" />
</div>

js：

initEventRecord() {
      var that = this;
      var btnElem = document.getElementById("messageBtn"); //获取ID
      var posStart = 0; //初始化起点坐标
      var posEnd = 0; //初始化终点坐标
      var posMove = 0; //初始化滑动坐标
      var boxElem = document.getElementById("send-text");

      btnElem.onmousedown = function(event) {
        event = that.enFn(event);
        btnElem = event.target;
        posStart = event.pageY;
        btnElem.value = "松开 结束";
        boxElem.onmousemove = move;
        boxElem.onmouseup = stop;
        console.log("dadad");
      };
      const move = function(event) {
        event = window.event;
        posMove= event.pageY;
        console.log(posStart - posEnd);
        // console.log(event);
        if (posStart - posMove > 10) {
          console.log("cac12222222222222222222222222222222222");

          btnElem.value = "松开鼠标，取消发送";
          boxElem.onmousemove = btnElem.onmouseup = null;
        } else {
          btnElem.value = "松开 结束";
        }
      };
      const stop = function(event) {
        event = window.event;
        posEnd = event.pageY;
        console.log(event);
        btnElem.value = "按住 说话";
        if (posStart - posEnd > 30) {
          console.log("取消发送");
          console.log("Cancel");
        } else {
          console.log("发送成功");
        }
        boxElem.onmousemove = boxElem.onmouseup = null;
      };
    },

注意onmousemove与onmouseup是父级的元素去移动或者说弹起；间隔数据自己调好判断就行