移动端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权威指南第六版,感谢它们的作者和译者.有发现什么问题的,欢迎留言指出 ...
随机推荐
- Mysql字符集设置
转 基本概念 • 字符(Character)是指人类语言中最小的表义符号.例如’A'.’B'等:• 给定一系列字符,对每个字符赋予一个数值,用数值来代表对应的字符,这一数值就是字符的编码(Encodi ...
- Ubuntu下通过SSH远程登录服务器的方法
1. 首先在服务器上安装ssh的服务器端.$ sudo aptitude install openssh-server 2. 启动ssh-server.$ /etc/init.d/ssh restar ...
- [Machine Learning & Algorithm]CAML机器学习系列1:深入浅出ML之Regression家族
声明:本博客整理自博友@zhouyong计算广告与机器学习-技术共享平台,尊重原创,欢迎感兴趣的博友查看原文. 符号定义 这里定义<深入浅出ML>系列中涉及到的公式符号,如无特殊说明,符号 ...
- Beta阶段项目总结
1. 每个成员在beta 阶段的实践和alpha 阶段有何改进? 王文奇:对数据库的操作更为熟练,在java web中实现对数据库的修改更加完善 刘元柱:对javascript,css和servl ...
- svn 版本迁移到 git 仓库
1.拉取 svn代码并转成 git 版本 git svn fetch http://svn.qtz.com/svn/qtz_code/java/qtz_sm/project/qtz_sm -Auser ...
- python 调用dll中c或c++语言的带指针方法,
在项目开发中遇到了,python需要去调用一个动态链接库dll中的c++方法.这个方法的参数为一个指针类型的参数,一个bool类型参数, 在python中并未对数字类型进行区分. int LP_Agc ...
- 复习(2)【postman,charles,filezilla server】
Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件.通常我们可以用它来测试接口. Charles是在Mac下常用的网络封包截取工具,在做移动开发时,我们为了调试与服务器端的 ...
- python之路十八
1.JS 正则 test - 判断字符串是否符合规定的正则 rep = /\d+/; rep.test("asdfoiklfasdf89asdfasdf ...
- EndNote(二)之英文引文导入方式
在上一篇EndNote教程(一)--基本介绍中介绍了基本使用,今天将来介绍如何将常用文献引文导入EndNote中. EndNote在文献管理方面有着很多优点,可以节约很多精力.但是,不同文献查询网站可 ...
- mac pods 安装
CocoaPods的安装步骤: 1.先配置Ruby环境: 若已安装Ruby,请升级Ruby环境 sudo gem update --system 若没有安装,则请看下面, 以下代码区域,带有 $ 打头 ...