touchstart,touchmove,touchend触摸事件的小小实践心得

近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成app也毫无压力。原本以为touch事件应该跟鼠标事件是一样的道理,实践过程中虽然不难,但还是碰到了不少坑,才发现还是略有区别的。

$(document).bind(touchEvents.touchstart, function (event) {
            event.preventDefault();
            
        });
        $(document).bind(touchEvents.touchmove, function (event) {
            event.preventDefault();
            
        });

        $(document).bind(touchEvents.touchend, function (event) {
            event.preventDefault();
            
        });/* 何问起 hovertree.com */

 

很多博文中称touch的三个事件都有targetTouches,touches以及changedTouches对象列表,其实不然,touchend事件中应该是只有个changedTouches触摸实例列表的,而且这里说明一下,回调函数的event只是一个普通的object对象,实际上event中有一个originalEvent属性,这才是真正的touch事件,这个事件中才存在着上诉三个触摸实例列表,这三个实例存储了触摸事件的位置等等属性,类似于鼠标事件。其他地方基本与鼠标事件是一致的。简单介绍一下这三个触摸列表,touches是在屏幕上的所有手指列表,targetTouches是当前DOM上的手指列表,所以当手指移开触发touchend事件时,event.originalEvent是没有这个targetTouches列表的,而changedTouches列表是涉及当前事件的列表,例如touchend事件中,手指移开。接下来谈谈pc与移动端的适配问题,既然使用html5,当然是看中他的跨平台特性了,不仅仅要ios和android适配,pc上直接打开网页最好也是可以的,但是pc上只支持鼠标事件怎么办。好办,仔细观察上面代码的触摸事件,touchEvents.touchXXX,看如下代码:

 

var touchEvents = {
        touchstart: "touchstart",
        touchmove: "touchmove",
        touchend: "touchend",

        /**
         * @desc:判断是否pc设备,若是pc,需要更改touch事件为鼠标事件,否则默认触摸事件
         */
        initTouchEvents: function () {
            if (isPC()) {
                this.touchstart = "mousedown";
                this.touchmove = "mousemove";
                this.touchend = "mouseup";
            }
        }
    };
/* hwq2.com */

 

若在pc上,则使用鼠标事件,在移动设备中,就使用触摸事件,就这么简单,判断是否pc也很方便,就不做多解释了。

使用示例:http://www.cnblogs.com/roucheng/p/texiao.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/120327.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Windows 打开和关闭默认共享方法汇总

    [原文]在使用xcopy上传文件至远程windows服务器时,出现“Invaliddriverspecification”(无效驱动器规格),经过各种排查,最终发现是服务器“关闭默认共享”导致的。Windows启动时都会默认打开admin$ipc$和每个盘符的共享,对于不必要的默认共享,一般都会把它取消掉,可当又需要打开此默认共享时,又该从哪里设置呢。经过自己的验证,汇总出一下方法。一:查看window共享资源运行–>cmd–>输入netshare二:彻底关闭

  • 原来一直以为i686是64位的

    原来一直以为i686是64位的在yum上找32位的i386找不到,看到i686以为是64位呢,原来它也是32位啊i686只是i386的一个子集,支持的cpu从Pentium2(686)开始,之前的型号不支持.备注:1.i386适用于intel和AMD所有32位的cpu.以及via采用X86架构的32的cpu.intel平台包括8086,80286,80386,80486,奔腾系列(1.2.3.4…

  • java数据库系统开发案例精选_Java解析db文件

    java数据库系统开发案例精选_Java解析db文件JAVADB数据库范例关于javaDB的介绍就不说了,直接上例子。首先将derby.jar添加到classpath下面(IDE的话直接引入)importjava.sql.*;importjava.util.*;importjava.io.*;publicclassTest{publicstaticvoidmain(String[]args)throwsException{DB…

    2022年10月25日
  • POJ3061 Subsequence(二进制前缀和法律+仿真足)

    POJ3061 Subsequence(二进制前缀和法律+仿真足)

  • 插头DP小结_dp插头接线标准

    插头DP小结_dp插头接线标准插头DP一般都是棋盘模型,找路径或者环路最值或者方案数。插头:说白了就是两个联通的格子,一个走向另一个,那么这里就有一个插头。轮廓线:DP逐格DP,那么轮廓线可以分开DP过的格子和未DP的格子。轮廓线的长度明显是m+1。插头垂直于轮廓线。转移:轮廓线在换行的时候要位移,这个画画图就出来了。然后具体问题具体讨论。比如任意多个环路,不考虑方向,那么就是eatthetrees,用最

    2022年10月28日
  • php怎么查看一个变量的占用内存

    php怎么查看一个变量的占用内存php怎么查看一个变量的占用内存

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号