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)


相关推荐

  • html refresh原理,HTML meta refresh 刷新与跳转(重定向)页面

    html refresh原理,HTML meta refresh 刷新与跳转(重定向)页面下面为各位整理了一些HTMLmetarefresh刷新与跳转(重定向)页面的例子吧,后面本站长自己也补充了一些js页面刷新与跳转例子吧。refresh属性值–刷新与跳转(重定向)页面refresh用于刷新与跳转(重定向)页面refresh出现在http-equiv属性中,使用content属性表示刷新或跳转的开始时间与跳转的网址refresh示例5秒之后刷新本页面:5秒之后转到梦之都首…

  • navicat永久激活码最新【永久激活】

    (navicat永久激活码最新)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~MLZP…

  • jmeter做接口压力测试_jmeter接口性能测试

    jmeter做接口压力测试_jmeter接口性能测试jmeter是apache公司基于java开发的一款开源压力测试工具,体积小,功能全,使用方便,是一个比较轻量级的测试工具,使用起来非常简单。因为jmeter是java开发的,所以运行的时候必须先要安装jdk才可以。jmeter是免安装的,拿到安装包之后直接解压就可以使用,同时它在linux/windows/macos上都可以使用。  jmeter可以做接口测试和压力测试。其中接口测试的简单操作

  • oracle11g详细安装教程_oracle11g32位安装

    oracle11g详细安装教程_oracle11g32位安装1、首先从http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.html下载合适的oracle数据库版本。2、解压压缩包,点击setup.exe,开始安装,一下为安装步骤的截图:口令:oracle11g第四步如果不是集群服务器要选择单实例数据库安装。

  • Pycharm 安装插件[通俗易懂]

    Pycharm 安装插件[通俗易懂]Pycharm安装插件Pycharm安装插件Pycharm中一些值得安装的插件RainbowBracketsIdeaVimMarkdownNavigatorTranslation如果说编辑器是程序员的武器,那么插件就是装备加成。插件可以让编写代码更加灵活Pycharm安装插件点击file–settings,进入设置找到apperance中的Plugins,在搜索框中搜索想要的插件,然后点击安装即可Pycharm中一些值得安装的插件RainbowBrack

  • kong网关集群部署[通俗易懂]

    kong网关集群部署[通俗易懂]kong网关集群部署机器准备节点A部署1.安装依赖组件2.安装postgresql3.创建kong数据库4.安装kong5.安装可视化界面konga6.konga部署在生产环境节点B部署1.安装kong测试集群效果机器准备节点A192.168.0.1节点B192.168.0.2节点A部署1.安装依赖组件yum-yinstallgcc-c++yum-yinstallpc…

发表回复

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

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