移动端二三事【二】:移动端触摸事件点透及多种解决方案。

大家都知道的少说,多分享一些干货。

一、首先说移动端的三大主要事件:

1.手指按下: ontouchstart
2.手指移动:ontouchmove
3.手指抬起 ontouchend

*使用移动端事件时,为尽可能地保证兼容性与调试时的友好性,尽可能用事件绑定的方式。例如:

/*
注意:
在移动端开发的时候,浏览器的模拟器时好时坏,一般不用on的方式绑定事件函数,要用事件绑定的方式(addEventListener)。
*/
    //用以下方式浏览器的移动端模拟器可能会无法识别事件
    var div = document.getElementById(‘div1‘);

    div.ontouchstart = function(){
        alert(1);
    }

所以一般采用以下方式:

div.addEventListener(‘touchstart‘,fn);

二、pc端事件与移动端事件的主要区别

与PC端的事件相比,移动端的触摸事件会比click事件快300毫秒,这300毫秒的由来是这样的(听公司某一大神说的):当初最早使用屏幕的双击缩放功能的是Safari浏览器,开发之初,为了判断用户行为(用户是想点击链接还是想双击缩放屏幕),所以规定以第一次点击(并非常规的click)时间比常规click提前300毫秒,而本次点击之后300毫秒内,如果用户再次点击,则会触发双击事件。若300毫秒内用户没有再次点击,则会触发click事件。而刚才说的第一次的点击,发展到今天也就成了移动端的触摸事件,所以常规的click会比触摸事件晚300毫秒。

三、移动端点透

正是因为这300毫秒的提前,会使移动端事件出现一个系统性的bug。

举个栗子,如下图:透明的红色div绝对定位,a链接基于常规文档流,在div的底层。

现在为红色div添加touchend事件,触摸后使红色div的display为none,而红色div消失后,页面跳转至a标签指定的链接地址。根据上面对移动端事件提前300毫秒的解释,可知touchend事件触发后300毫秒,再次触发click事件,进而触发a标签的默认行为。

四、点透的多种解决方案

方案一:下层不使用有点击行文或获取焦点行为的元素(淘宝移动端)

截图如下:

淘宝的解决方案:并没有使用a链接,而是为其加上了自定义属性。

缺点:对于小公司的开发团队,不利于seo优化,适合流量入口众多的大公司。其次,此方法并没有从根本上解决问题,底层不能出现绑定有click事件的元素。

时间: 2024-11-01 19:27:15

移动端二三事【二】:移动端触摸事件点透及多种解决方案。的相关文章

iOS xmpp协议实现聊天之openfire的服务端配置(二)

本篇主要说一下如何利用命令行来正确配置MySql. 首先打开终端: 1.为mysql起一个别名 alias mysql=/usr/local/mysql/bin/mysql 2.创建mysql的管理员  admin(后期登陆用到) alias mysqladmin=/usr/local/mysql/bin/mysqladmin 3.设置root账号密码 mysqladmin -u root password 初始密码 4.连接数据库 mysql -u root -p  (提示输入刚才的密码) 5

Replication的犄角旮旯(二)--寻找订阅端丢失的记录

原文:Replication的犄角旮旯(二)--寻找订阅端丢失的记录 <Replication的犄角旮旯>系列导读 Replication的犄角旮旯(一)--变更订阅端表名的应用场景 Replication的犄角旮旯(二)--寻找订阅端丢失的记录 Replication的犄角旮旯(三)--聊聊@bitmap Replication的犄角旮旯(四)--关于事务复制的监控 Replication的犄角旮旯(五)--关于复制identity列 Replication的犄角旮旯(六)-- 一个DDL引

Android流媒体开发之路二:NDK开发Android端RTMP直播推流程序

NDK开发Android端RTMP直播推流程序 经过一番折腾,成功把RTMP直播推流代码,通过NDK交叉编译的方式,移植到了Android下,从而实现了Android端采集摄像头和麦克缝数据,然后进行h264视频编码和aac音频编码,并发送到RTMP服务器,从而实现Android摄像头直播.程序名为NdkRtmpEncoder,在这里把整个过程,和大体框架介绍一下,算是给需要的人引路. 开发思路 首先,为什么要用NDK来做,因为自己之前就已经实现过RTMP推流.RTMP播放.RTSP转码等等各种

初识zabbix需了解的二三事

简介 zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案: zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速定位/解决存在的各种问题: 监控平台的组成 数据采集 --> 数据存储 --> 数据展示和分析 --> 报警 常见监控实现方案对比 cacti 优点:利用rrdtool绘图,图形美观: 缺点:报警功能薄弱,不适合大规模监控场景: nagios 优点:报警功能强大: 缺点:只关心正常与否的状态,数

移动端拖拽(模块化开发,触摸事件,webpack)

通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). 这个demo实现的功能是:可以拖拽的元素(在这里是图片)位于列表中,这些元素可以被拖到指定区域,到达指定区域(控制台)后,元素被插入控制台后,原来的拖动元素返回原位置,新的元素依然可以在控制台中拖动,也能拖出控制台. 在这个demo中一个用三个模块,分别为ajax模块,drag模块,position

老曹眼中的研发管理二三事

这是在gitchat上的第一次分享,中生代联手gitchat在做研发管理的专题活动,作为先锋,抛砖引玉. 关于管理,必然会谈到业界先贤德鲁克先生对管理的定义. 管理就是界定企业的使命,并激励和组织人力资源去实现这个使命.界定使命是企业家的任务,而激励与组织人力资源是领导力的范畴,二者的结合就是管理. 这是对企业管理的阐述,管理是一种实践,其本质不在于'知'而在于'行':其验证不在于逻辑,而在于成果:其唯一权威就是成就. 而我们多数人不是企业家,更多是基层的管理者,面对的一个或几个小型的组织.尤其

通达OA 一次通达升级的二三事

这不最近OA使用发现有几个问题:工作流设置强制合并和强制并发时不能转交,工作流中的附件会自动复制繁殖,造成附件就有好几十屏打开时跟死机一样,通过咨询通达公司可以通过省级的办法解决,看来他们也发现了这样的问题,还好已经有解决方案. 从通达官网上下载升级包,按照省级说明将文件放到相应目录,断了网线直接在服务器上操作,打开服务器的ip地址访问,上面提示点击链接进行升级,点击链接后就是没有反应,原来用的360浏览器,换了IE也是一样.通达说是浏览器的事,上次就出现过一次这样的情况,怎么办?再安装个火狐?

Ubuntu12.04 Version 安装二三事

Ubuntu12.04 Version 安装二三事 安装输入法 因为是全英的系统,所以,中文输入法是一定要装的!!! 介绍一:(和我电脑配置很像,from http://vb2005xu.iteye.com/blog/1748575) Ubuntu上的输入法主要有小小输入平台(支持拼音/二笔/五笔等),Fcitx,Ibus,Scim等.其中Scim和Ibus是输入法框架. 在Ubuntu的中文系统中自带了中文输入法,通过Ctrl+Space可切换中英文输入法.这里我们主要说下Ubuntu英文系统

iOS7下滑动返回与ScrollView共存二三事

[转载请注明出处] = =不是整篇复制就算注明出处了亲... iOS7下滑动返回与ScrollView共存二三事 [前情回顾] 去年的时候,写了这篇帖子iOS7滑动返回.文中提到,对于多页面结构的应用,可以替换interactivePopGestureRecognizer的delegate以统一管理应用中所有页面滑动返回的开关,比如在UINavigationController的派生类中 1 //我是一个NavigationController的派生类 2 - (id)initWithRootV