为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入门教程(1) 什么是JS
Jan 31 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
DOM基础教程之使用DOM控制表格
Jan 20 Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
express默认日志组件morgan的方法
Apr 05 Javascript
jQuery实现的中英文切换功能示例
Jan 11 jQuery
详解vue中axios的使用与封装
Mar 20 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 Javascript
es6函数中的作用域实例分析
Apr 18 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 access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
twig里使用js变量的方法
2016/02/05 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
json 入门基础教程 推荐
2009/10/31 Javascript
jQuery学习笔记之Helloworld
2010/12/22 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
js正则相关知识点专题
2018/05/10 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
Python下的twisted框架入门指引
2015/04/15 Python
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
人事专员岗位职责范本
2014/03/04 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
预备党员公开承诺书
2014/05/28 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
门卫岗位职责
2015/02/09 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书
怎么用Python识别手势数字
2021/06/07 Python
基于PyQt5制作一个群发邮件工具
2022/04/08 Python