关于移动端的长按事件

2019-04-17  本文已影响0人  婆娘漂亮生活安逸

1.关于长按这个操作,我们需要借助三个事件:

2.合理使用计时器

setTimeoutclearTimeout

3.直接上代码,以长按5秒后进行删除操作为🌰讲解;

// HTML 文件
<div
        style="width: 100px; height: 100px; background-color: #CCC;"
        onTouchStart="onTouchStart()"
        onTouchMove="onTouchMove()"
        onTouchEnd="onTouchEnd()"
>
      长按我5秒可删除
</div>
// 脚本文件
      var timeOutId = 0; // 定时器
      // touch开始
      function onTouchStart() {
          timeOutEvent = setTimeout("longPress()", 5000); // 5秒后开始触发 longPress 函数
      }

      // touch结束
      function onTouchEnd() {
          clearTimeout(timeOutEvent); //清除定时器
          if (timeOutEvent != 0) {
              //意味着长按时间不到规定时间,可以进行其他操作,例如 onCLick
              
          }
      }

      // touch时移动
      function onTouchMove() {
          clearTimeout(timeOutEvent); //清除定时器
          timeOutEvent = 0;
          // 意味着用户在长按时进行了移动,可以进行其他操作,例如 撤销删除操作;
          cancle();
      }

      //长按后应该执行的内容
      function longPress() {
          timeOutEvent = 0;
          //执行长按要执行的内容,如删除操作
          delete();
      }

⚠️
当 touch 操作 end 或者 move 时,都需要清除定时器;
在 touch 进行 move 操作时,最好可以要进行距离的判断,当移动距离大于多少像素,才认定是进行 move 操作。

上一篇下一篇

猜你喜欢

热点阅读