移动端js知识总结
1.如果使用jquery绑定touch事件的话,获取touchstart,touchmove的触点坐标用 e.originalEvent.targetTouches[0].pageX,
获取touchend则用 e.originalEvent.changedTouches[0].pageX
2.有些版本的iphone4中, audio和video默认播放事件不会触发
比如使用window.onload或计时器等都不能触发播放,必须用JS写事件让用户手动点击触发才会开始播放,比如
$(document).one('touchstart',function(){
audio.play();
})
3.想要在touchmove:function(e,参数一)加一个参数,结果直接使用e.preventDefault()就会 e 报错,处理方法为
touchmove:function(e,参数一){
var e=arguments[0];
e.preventDefault();
}
4.点击一个元素时,使用touchstart会立即触发,而使用click则用有大概0.3s的延迟
想模拟一个立即触发的点击事件有两种方法,fastclick.js和zepto.js里的tap事件
5.不过zepto的tap事件有一个事件穿透的问题。
假如你tap一个弹出层元素(这个元素遮罩了一个a标签),这个元素立即消失,这样由于上述的0.3s延迟tap事件就会传递给a标签成click事件造成a标签跳转。
以上面的例子来说,解决方案视情况而定:
① tap时让遮罩渐隐消失,这个过程超过400ms就不会穿透到下一层去了
② 在touchend事件回调中加入preventDefault, 并在下一层中加上pointer-events:none。(这个没用过)
③ 有的时候比如弹出一个iphone上滑动出来的层,点击黑色半透明区域弹出层消失,这种可以在黑色区域绑定touchend也是和tap差不多的效果
1.当弹窗出现时,想禁止屏幕的滑动,给那个遮罩层添加touchmove事件即可,用e.preventDefault()会阻止的scroll,click等事件,消失时再off掉,
$(".body_cover").on("touchmove", function(e) {
e.preventDefault();
});
2.使用input file上传文件时,可以指定接受的类型,accept="image/png,image/jpeg,image/gif" ,
同时在android上默认不能使用相机,可以加capture="camera"
同时,由于原生的样式不好看,可以通过设置input的display:none,然后使用id.click()去触发input元素的点击。
3.给元素加:active伪类时,如果要求高,兼容性好的话,就得用js监控touchstart然后加相应的class
$(document).on("touchstart", function(e) {
var target = $(e.target);
if (target.hasClass("is_hover")) {
target.addClass("hover_css");
}
});
移动端js知识总结的更多相关文章
- 高性能双端js模板
高性能双端js模板(新增filter)---simplite simplite是一款js实现的模板引擎,它能够完成浏览器端js模版和node服务器端js模板的数据渲染. 渲染性能十分突出. 支持浏览器 ...
- 高性能双端js模板---simplite
simplite是一款js实现的模板引擎,它能够完成浏览器端js模版和node服务器端js模板的数据渲染,渲染性能达到引擎的极限. 渲染性能十分突出. 支持浏览器端和node服务器端模板渲染. 它简单 ...
- 【Todo】React & Nodejs学习 &事件驱动,非阻塞IO & JS知识栈:Node为主,JQuery为辅,Bootstrap & React为辅辅,其他如Angular了解用途即可
JS知识栈:Node为主,JQuery为辅,Bootstrap & React为辅辅,其他如Angular了解用途即可 今天在学习ReactJS和NodeJS,看到关于ReactJS的这篇文章 ...
- 浏览器端JS导出EXCEL
浏览器端JS导出EXCEL FileSaver.js 实现了在本身不支持 HTML5 W3C saveAs() FileSaver 接口的浏览器支持文件保存.FileSaver.js 在客户端保存文件 ...
- 🤔 移动端 JS 引擎哪家强?美国硅谷找......
如果你喜欢我写的文章,可以把我的公众号设为星标 ,这样每次有更新就可以及时推送给你啦 在一般的移动端开发场景中,每次更新应用功能都是通过 Native 语言开发并通过应用市场版本分发来实现的.但是市场 ...
- js知识梳理6:关于函数的要点梳理(2)(作用域链和闭包)
写在前面 注:这个系列是本人对js知识的一些梳理,其中不少内容来自书籍:Javascript高级程序设计第三版和JavaScript权威指南第六版,感谢它们的作者和译者.有发现什么问题的,欢迎留言指出 ...
- js知识梳理5:关于函数的要点梳理(1)
写在前面 注:这个系列是本人对js知识的一些梳理,其中不少内容来自书籍:Javascript高级程序设计第三版和JavaScript权威指南第六版,感谢它们的作者和译者.有发现什么问题的,欢迎留言指出 ...
- js知识梳理4.继承的模式探究
写在前面 注:这个系列是本人对js知识的一些梳理,其中不少内容来自书籍:Javascript高级程序设计第三版和JavaScript权威指南第六版,感谢它们的作者和译者.有发现什么问题的,欢迎留言指出 ...
- js知识梳理3:创建对象的模式探究
写在前面 注:这个系列是本人对js知识的一些梳理,其中不少内容来自书籍:Javascript高级程序设计第三版和JavaScript权威指南第六版,感谢它们的作者和译者.有发现什么问题的,欢迎留言指出 ...
随机推荐
- Android中仿IOS提示框的实现
前言 在Android开发中,我们有时需要实现类似IOS的对话框.今天我就来总结下,如何通过自定义的开发来实现类似的功能. 自定义Dialog 我们知道Android中最常用的对话框就是Dialog及 ...
- HttpContext.Cache属性
HttpContext基于HttpApplication的处理管道,由于HttpContext对象贯穿整个处理过程,所以,可以从HttpApplication处理管道的前端将状态数据传递到管道的后端, ...
- RESTful 接口调试分享利器 restc
这个工具来自于https://elemefe.github.io/restc/ 这里对Abp进行了一次封装 1.在项目中添加nuget包 Abp.Web.Api.Restc 2.在项目Abp模块的D ...
- iOS优秀博客收录
原文链接:http://ju.outofmemory.cn/entry/105297 唐巧 王巍 破船之家 NSHipster Limboy 无网不剩 念茜的博客 Xcode Dev Ted's Ho ...
- 04 MapReduce原理介绍
大数据实战(上) # MapReduce原理介绍 大纲: * Mapreduce介绍 * MapReduce2运行原理 * shuffle及排序 定义 * Mapreduce 最早是由googl ...
- 使用xib封装一个view的步骤
1.新建一个xib文件描述一个view的内部结构(假设叫做SSTgCell.xib) 2.新建一个自定义的类 (自定义类需要继承自系统自带的view, 继承自哪个类, 取决于xib根对象的Class ...
- [Machine Learning] 梯度下降法的三种形式BGD、SGD以及MBGD
在应用机器学习算法时,我们通常采用梯度下降法来对采用的算法进行训练.其实,常用的梯度下降法还具体包含有三种不同的形式,它们也各自有着不同的优缺点. 下面我们以线性回归算法来对三种梯度下降法进行比较. ...
- SQL Server数据库定时自动备份
SQL Server 数据库定时自动备份[转] 在SQL Server中出于数据安全的考虑,所以需要定期的备份数据库.而备份数据库一般又是在凌晨时间基本没有数据库操作的时候进行,所以我们不可能要求 ...
- svn检出的时候报 Unable to connect to a repository at URL错误(摘自CSDN)
背景:1. SVN服务器:VisualSVN-Server-2.5.5: 2. SVN客户端:TortoiseSVN-1.7.6.22632-x64-svn-1.7.4.msi: 在S ...
- tftp服务器简单安装配置
tftp服务器最简单安装配置 1.安装tftp-server sudo apt-get install tftpd-hpa sudo apt-get install tftp-hpa(如果不需要客户端 ...