网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发  > javascript

js如何模拟手机平板移动设备--触摸、点击、滑屏(附源码)

2021/2/28 22:08:08

前一阵子公司做项目,手机上的网页需要js来模拟手机平板等移动设备的触摸、点击、滑屏效果,直接上代码,供大家参考(function(doc, win, undefined) { "use strict"; var start = { //记录开始的触点 x: 0, y: 0 }, …


前一阵子公司做项目,手机上的网页需要js来模拟手机平板等移动设备的触摸、点击、滑屏效果,直接上代码,供大家参考

(function(doc, win, undefined) {
    "use strict";
    var start = {  //记录开始的触点
            x: 0,
            y: 0
        },
        delta = {  //记录滑动距离
            x: 0,
            y: 0
        },
        startTime = 0, //开始时间
  curTime=0,     //从开始到现在的事件
        longTime = 200,//200ms触发长按事件
  longCurTime=1000, //1000ms 手指不移开即可触发 通过定时器往上加
        target,
        minDelta = 50,//最小滑动距离
  timer=null;
    //创建事件对象
    function createEvent(type) {
        var event;
 
        try {
            event = new Event(type);
        } catch (e) {
            event = doc.createEvent("Events");
            event.initEvent(type, true, true);
        }
        return event;
    }
 //触发事件
    function fireEvent(type, target) {
        var event = createEvent(type);
 
        target.dispatchEvent(event);
    }
 //触摸时触发的函数
    function onTouchStart(event) {
        var touch = event.touches[0];
        //判断默认行为是否可以被禁用
  if (event.cancelable) {
   // 判断默认行为是否已经被禁用
   if (!event.defaultPrevented) {
    event.preventDefault();
   }
  }
        target = event.target;
  //获取开始的触点
        start.x = touch.pageX;
        start.y = touch.pageY;
        delta.x = 0;
        delta.y = 0;
  //当前触摸时的时间
        startTime =new Date();
  //持续触摸不动400ms 则生成longCurTap事件
  timer=setInterval(function(){
    curTime+=10;
    if(curTime==longCurTime){
      fireEvent("longCurTap", target);    
    }
    //console.log(curTime);
  },1);
    }
 //滑动时触发的函数
    function onTouchMove(event) {
        var touch = event.touches[0];   
  //计算滑动的距离
        delta.x = touch.pageX - start.x;
        delta.y = touch.pageY - start.y;
    }
 //移开时触发的函数
    function onTouchEnd(event) {
  //手指移开后先清除定时器(服务于longCurTap)
  clearInterval(timer);
        curTime=0;
  //获取自上次触摸以来发生了什么改变的touch对象的数组
        var touch = event.changedTouches[0],
            deltaTime =new Date() - startTime,
   //返回滑动距离的绝对值
            deltaX = Math.abs(delta.x),
            deltaY = Math.abs(delta.y);
   //console.log(deltaTime);
        //判断位置是否发生改变
        if (touch.pageX === start.x && touch.pageY === start.y) {
   //判断触摸时间是否小于200ms
            if (deltaTime < longTime) {
                fireEvent("tap", target);//触摸事件
    //console.log(deltaTime);
            } else if(deltaTime > longTime && deltaTime < longCurTime/2){
                fireEvent("longTap", target);//长按事件
            }
        }
  //判断滑动距离是否超过30
        if (deltaX > minDelta || deltaY > minDelta) { 
   //比较 x,y 滑动边的长度来判断方向
            if (deltaX > deltaY) {
                if (delta.x > 0) {
                    fireEvent("swipeRight", target);
                } else {
                    fireEvent("swipeLeft", target);
                }
            } else {
                if (delta.y > 0) {
                    fireEvent("swipeDown", target);
                } else {
                    fireEvent("swipeUp", target);
                }
            }
        }
    }
 //监听三个触摸事件
    doc.addEventListener("touchstart", onTouchStart);
    doc.addEventListener("touchmove", onTouchMove);
    doc.addEventListener("touchend", onTouchEnd);
}(document, window));


相关资讯

  • js如何遍历数组保存需要的

    我们如何通过遍历数组删除不需要的,保留需要的内容呢?我们来看看下面的代码是如何实现的。<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>js如何遍历数组保存需要的</title> <meta http-…

    2021/5/16 21:43:10
  • js写的urldecode函数及作用

    本函数对字符串进行URL解码。例如通过urlencode编码后的字符串,可通过UrlDecode进行解码。对Url路径加码的函数是UrlEncode 用法相反,和UrlDecode是一致对应的URLEncode是这样编码的 1、数字和字母不变。 2、空格变为"+"号。 3、其他被编码成&…

    2021/5/16 16:25:41
  • js getelementbyid后获取下一级的ID的方法

    根据id获取父对象,然后使用childNodes获取所有子对象数组,关键代码:document.getElementById(div_id).childNodes; // 子对象数组实现代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh…

    2021/5/9 13:28:27
  • javascript使用settimeout闭包实现倒计时

    闭包知识1、闭包的概念:指有权访问另一个函数作用域中的变量的函数,一般情况就是在一个函数中包含另一个函数。2、闭包的作用:访问函数内部变量、保持函数在环境中一直存在,不会被垃圾回收机制处理因为函数内部声明 的变量是局部的,只能在函数内部访问到,但是函数外…

    2021/4/24 19:56:28
  • js定时器setInterval清除之后还会执行

    今天在博客上看到有人问js定时器setInterval清除之后还会执行,他是js定时器控制一个盒子做旋转动画,离开页面后js定时器还在执行,但是盒子这个dom却被浏览器消除了,以至于再次进入该页面时动画会加速执行。解决方法 离开页面时清除定时器 进入时重新开启定时器d…

    2021/4/24 16:06:27
  • js添加删除表格table行列-附源码

    <!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-…

    2021/3/26 21:48:19
  • js如何判断页面某个元素是否已经绑定某个事件?

    我们有时防止页面元素重复绑定事件,需要判断一下页面对应的元素是否已经绑定了事件,下面就是我写了一个javascript函数用来判断页面某个元素是否已经绑定某个事件:javascript代码var div = document.getElementById(div);logEvent(click , div , false , false , funct…

    2021/3/24 21:20:27
  • A域名js访问B域名对象如何实现?JavaScript跨域解决办法

    什么是跨域JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下:首先什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无…

    2021/3/11 22:44:58
  • 一张图教你彻底搞清楚javascript中的top、clientTop、scrollTop、offsetTop都是什么?

    clipboardscrollHeight: 获取对象的滚动高度。scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于版面或由父…

    2021/2/28 21:52:11