为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 相关文章推荐
监控 url fragment变化的js代码
Apr 19 Javascript
Javascript开发之三数组对象实例介绍
Nov 12 Javascript
jquery 选取方法都有哪些
May 18 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
JavaScript reduce和reduceRight详解
Oct 24 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
JavaScript制作简单的框选图表
May 15 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
浅谈Angular路由守卫
Aug 26 Javascript
详解vue的双向绑定原理及实现
May 05 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
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
PHP XML备份Mysql数据库
2009/05/27 PHP
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
初识通用数据库操作类――前端easyui-datagrid,form(php)
2015/07/31 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
jQuery常见的选择器及用法介绍
2016/12/20 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
angular2 组件之间通过service互相传递的实例
2018/09/30 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
pandas将numpy数组写入到csv的实例
2018/07/04 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
python线程里哪种模块比较适合
2020/08/02 Python
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
2015年组织部工作总结
2015/04/03 职场文书
前台岗位职责范本
2015/04/16 职场文书
行政上诉状范文
2015/05/23 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
Moment的feature导致线上bug解决分析
2022/09/23 Javascript