为jQuery添加Webkit的触摸的方法分享


Posted in Javascript onFebruary 02, 2014

这段代码是我在做13年一份兼职的时候无聊加上去的,为jQuery添加触摸事件的支持。因为做得有点无聊,所以就帮客户添加了用响应式网页+JS touch兼容了移动设备,主要是Webkit的移动设备。

这里就分享下我的实现。
先贴上代码:

//Published by Indream Luo
//Contact: indreamluo@qq.com
//Version: Chinese 1.0.0
!function ($) {
    window.indream = window.indream || {};
    $.indream = indream;
    //Define events
    indream.touch = {
        evenList: {
            touchStart: {
                htmlEvent: 'touchstart'
            },
            touchMove: {
                htmlEvent: 'touchmove'
            },
            touchEnd: {
                htmlEvent: 'touchend'
            },
            tapOrClick: {
                eventFunction: function (action) {
                    $(this).each(function () {
                        (function (hasTouched) {
                            $(this).touchEnd(function (e) {
                                hasTouched = true;
                                action.call(this, e);
                            });
                            $(this).click(function (e) {
                                if (!hasTouched) {
                                    action.call(this, e);
                                }
                            });
                        }).call(this, false);
                    });
                    return this;
                }
            },
            moveOrScroll: {
                eventFunction: function (action) {
                    $(this).each(function () {
                        (function (hasTouched) {
                            $(this).touchMove(function (e) {
                                hasTouched = true;
                                action.call(this, e);
                            });
                            $(this).scroll(function (e) {
                                if (!hasTouched) {
                                    action.call(this, e);
                                }
                            });
                        }).call(this, false);
                    });
                    return this;
                }
            }
        }
    }
    //Add events into jquery
    for (var eventName in indream.touch.evenList) {
        var event = indream.touch.evenList[eventName];
        $.fn[eventName] = event.eventFunction || (function (eventName, htmlEvent) {
            return function (action) {
                $(this).each(function () {
                    $(this).bind(htmlEvent, action);
                    //Add event listener method for IE or others
                    if (this.attachEvent) {
                        this.attachEvent('on' + htmlEvent, function (e) {
                            $(this).on(eventName);
                        });
                    } else {
                        this.addEventListener(htmlEvent, function (e) {
                            $(this).on(eventName);
                        });
                    }
                });
                return this;
            }
        })(eventName, event.htmlEvent);
    }
}(window.jQuery);

网上能找到很多关于Touch事件的相关信息,所以我就不详细说明了,可以解释得简单一点。

触摸事件代替鼠标事件
在Webkit移动设备上,触摸操控首先会触发触摸事件,在0.5秒后才会触摸鼠标事件。

个人觉得这在设计上可以理解。先满足于触摸操控的需求,然后再向“下”兼容鼠标事件,以满足原有面向桌面网页的使用。

所有的事件大致执行顺序是:touchstart->touchmove->touchend->0.5s->鼠标事件mouseover/scroll/click等

按照webkit移动浏览器的设计,一般开发时候按照桌面网页开发,然后移动设备上使用是没问题的。不过桌面上大量使用的hover类效果时常会因为触摸把mouse事件+click事件触发个遍而悲剧;0.5秒的延迟也对用户体验造成了大伤害。

所以我添加了tapOrClick事件,用途就是替代click事件,并且灭了那0.5秒。

滚动锁定
在用户使用触摸设备进行滚动,而触摸已经停止的时候,浏览器会锁定整个页面,暂停所有UI资源占用,而把大部分资源留给内核进行滚动。同样的情况还会发生在放大缩小页面内容,甚至更甚。

因为要加个滚动渐变的特效,所以我添加了moveOrScroll事件,在滑动的时候执行滚动中应该执行的效果。

当然,这里还是不完美的,因为手指一旦离开屏幕(触摸事件停止),页面自由滚动的这段时间,js也会被freeze。这只是没有办法中的办法而已。

滚动锁定还会导致另一个问题就是:滚动有三种,分别是上下、左右、自由。

用一下触摸设备就会发现,如果从触摸开始被判定是上下滚动,那么触摸时再怎么左右滑动都不会有左右滑动的效果,除非放开重来。同样的情况也会发生在一开始为左右滚动。自由滚动的话需要一开始就进行斜向滚动。

在这个时候如果需要加入特定事件的话,需要注意事件的判断。在jQuery的事件回调参数中,假设参数名为e,那么一般用:

e.originalEvent.touches[0].pageX可以判断触摸情况。开发时需要自行记录触摸事件的情况再作判断。

原生最优
请尽量不要尝试用大量的JS方法触发来实现一些本身没有的样式效果。

比如元素静态不动,理应用position:fix;来实现,但许多开发人员会是用js不断刷新其控件位置来解决。

这种实现方式放在触摸设备上,一般只会出现两种情况:

1.卡死你
2.页面被冻结,冻结技术后突然发现事件全部执行完了(原因如上,浏览器会集中UI线程的资源给内核优先)
一般移动设备的屏幕有效刷新率不过30Hz,精简指令集的CPU本身也会慢一些,加上大部分的移动设备都是...Android...

所以,性能必须尽量依赖原生提供的方法。一些Hack和Cover的方法对方受不了。

如何使用
当时因为兼职交付好像就一两周的事情,所以没有把代码写得太好,不过还是能用。大致的用法跟普通的jQuery事件一致,命名和实现方面确实还值得商榷:

$('.sign .usernametip').tapOrClick(function () {
    $(this).css('visibility', 'hidden');
    $('.sign .username').focus();
});

跟项目中的很多事情一样,许多事情看似简单,但实际上却会出现各种各样的问题。

触摸事件并不是简单地便可兼容,单实现了功能外还需要顾虑最实质的问题——特定的交互模式。

比如触摸中需要隐藏许多空间以留有更多的空间给有限的用户屏幕;许多本身以点击切换的元素在触摸的最佳体验中应该改成滑动切换,甚至要顾虑不同的滑动情况;触摸各事件的停留事件不同可能代表不同的操作,需要进行判别......

虽然知道jQuery Mobile等已经有比较完善的各种方法,不过就是忍不住自己实现一下看看。

Javascript 相关文章推荐
通过JAVASCRIPT读取ASP设定的COOKIE
Feb 15 Javascript
JS 创建对象(常见的几种方法)
Nov 03 Javascript
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
js 实现浏览历史记录示例
Apr 20 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
Nov 17 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
Ajax的概述与实现过程
Nov 18 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
vue cli 3.0 使用全过程解析
Jun 14 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 Javascript
简单的JavaScript互斥锁分享
Feb 02 #Javascript
在百度知道团队中快速审批新成员的js脚本
Feb 02 #Javascript
基于jquery的simpleValidate简易验证插件
Jan 31 #Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 #Javascript
jquery为页面增加快捷键示例
Jan 31 #Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 #Javascript
jquery 页面滚动到底部自动加载插件集合
Jan 31 #Javascript
You might like
PHP以及MYSQL日期比较方法
2012/11/29 PHP
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
js 自定义的联动下拉框
2010/02/07 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
js实现五星评价功能
2017/03/08 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
使用Python对Excel进行读写操作
2017/03/30 Python
TensorFlow在MAC环境下的安装及环境搭建
2017/11/14 Python
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
python SocketServer源码深入解读
2019/09/17 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
python实现3D地图可视化
2020/03/25 Python
python新手学习使用库
2020/06/11 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
解决c++调用python中文乱码问题
2020/07/29 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
学生拾金不昧表扬信
2014/01/21 职场文书
公司建议书怎么写
2014/05/15 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
离职证明范本(5篇)
2014/09/19 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书