• js touch触屏原理分析


    之前我们做过许多触屏的特效,那么,今天,我们来分析下js的触屏原理。事实上,大家百度一下js touch基本上可以找到这文章“指尖下的js ——多触式web前端开发之一:对于Touch的处理”,我想这文章许多初学js touch的人都看过。

    我们今天以实例来说明吧。在实现触屏中,我们必须采用js的addEventListener,接着加上 touchstart,touchmove,touchend。今天我们的代码里加上了jquery,只不过是用来获取ID及CSS,呵呵,毕竟,JQ大 家都在用。但对于事件的添加,大家还是得用document,getElementById这种模式,因为这东西只有JS才有,JQUERY里并没有 TOUCH这样的东西。

    大家可以看到,在代码里有这句话,e.preventDefault(),假设不写这一句,你在触屏的时候,页面就会滑动,所以它的作用是巨大的。。。

    e.touches[0]表示什么呢?就是手势里的第一种,我们就认为是touch吧,触屏里还有其它两个手指的手势,我们今天就学一种,呵。。。

    我们取得对像的left,top及手的触屏位置,这时,touchstart完成了。。。

    我们那个isdrag是用来判断是否可以拖动的,我们用手拖动后的位置加上对像的位置减去touchstart时的位置,就可以取得移动后的位置,这样,我们就完成了touchmove这个过程。。

     对于touchend,我们就写上一个ifdrag=false,表示不再拖动啦。。。

  • 相关阅读:

    使用docker构建fastdfs
    docker测试
    java测试远程调试(转载)
    mac上运行mongodb-community
    mac上zookeeper服务开启,kafka开启
    idea注册配置
    java-集合
    selenium+phantomjs爬取bilibili
    [转载] Python数据类型知识点全解
  • 原文地址:https://www.cnblogs.com/kt520/p/3790074.html
Copyright © 2020-2023  润新知