1.如果使用jquery绑定touch事件的话,获取touchstarttouchmove的触点坐标用 e.originalEvent.targetTouches[0].pageX

获取touchend则用 e.originalEvent.changedTouches[0].pageX

 2.有些版本的iphone4中, audiovideo默认播放事件不会触发

    比如使用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.jszepto.js里的tap事件
5.不过zeptotap事件有一个事件穿透的问题。
假如你tap一个弹出层元素(这个元素遮罩了一个a标签),这个元素立即消失,这样由于上述的0.3s延迟tap事件就会传递给a标签成click事件造成a标签跳转。
以上面的例子来说,解决方案视情况而定:
① tap时让遮罩渐隐消失,这个过程超过400ms就不会穿透到下一层去了
② 在touchend事件回调中加入preventDefault, 并在下一层中加上pointer-events:none。(这个没用过)
③ 有的时候比如弹出一个iphone上滑动出来的层,点击黑色半透明区域弹出层消失,这种可以在黑色区域绑定touchend也是和tap差不多的效果

  1.当弹窗出现时,想禁止屏幕的滑动,给那个遮罩层添加touchmove事件即可,用e.preventDefault()会阻止的scrollclick等事件,消失时再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知识总结的更多相关文章

  1. 高性能双端js模板

    高性能双端js模板(新增filter)---simplite simplite是一款js实现的模板引擎,它能够完成浏览器端js模版和node服务器端js模板的数据渲染. 渲染性能十分突出. 支持浏览器 ...

  2. 高性能双端js模板---simplite

    simplite是一款js实现的模板引擎,它能够完成浏览器端js模版和node服务器端js模板的数据渲染,渲染性能达到引擎的极限. 渲染性能十分突出. 支持浏览器端和node服务器端模板渲染. 它简单 ...

  3. 【Todo】React & Nodejs学习 &事件驱动,非阻塞IO & JS知识栈:Node为主,JQuery为辅,Bootstrap & React为辅辅,其他如Angular了解用途即可

    JS知识栈:Node为主,JQuery为辅,Bootstrap & React为辅辅,其他如Angular了解用途即可 今天在学习ReactJS和NodeJS,看到关于ReactJS的这篇文章 ...

  4. 浏览器端JS导出EXCEL

    浏览器端JS导出EXCEL FileSaver.js 实现了在本身不支持 HTML5 W3C saveAs() FileSaver 接口的浏览器支持文件保存.FileSaver.js 在客户端保存文件 ...

  5. 🤔 移动端 JS 引擎哪家强?美国硅谷找......

    如果你喜欢我写的文章,可以把我的公众号设为星标 ,这样每次有更新就可以及时推送给你啦 在一般的移动端开发场景中,每次更新应用功能都是通过 Native 语言开发并通过应用市场版本分发来实现的.但是市场 ...

  6. js知识梳理6:关于函数的要点梳理(2)(作用域链和闭包)

    写在前面 注:这个系列是本人对js知识的一些梳理,其中不少内容来自书籍:Javascript高级程序设计第三版和JavaScript权威指南第六版,感谢它们的作者和译者.有发现什么问题的,欢迎留言指出 ...

  7. js知识梳理5:关于函数的要点梳理(1)

    写在前面 注:这个系列是本人对js知识的一些梳理,其中不少内容来自书籍:Javascript高级程序设计第三版和JavaScript权威指南第六版,感谢它们的作者和译者.有发现什么问题的,欢迎留言指出 ...

  8. js知识梳理4.继承的模式探究

    写在前面 注:这个系列是本人对js知识的一些梳理,其中不少内容来自书籍:Javascript高级程序设计第三版和JavaScript权威指南第六版,感谢它们的作者和译者.有发现什么问题的,欢迎留言指出 ...

  9. js知识梳理3:创建对象的模式探究

    写在前面 注:这个系列是本人对js知识的一些梳理,其中不少内容来自书籍:Javascript高级程序设计第三版和JavaScript权威指南第六版,感谢它们的作者和译者.有发现什么问题的,欢迎留言指出 ...

随机推荐

  1. nginx服务器命令

    nginx -s reload  :修改配置后重新加载生效 nginx -s reopen  :重新打开日志文件nginx -t -c /path/to/nginx.conf 测试nginx配置文件是 ...

  2. 【jQuery】初始化的三种方法

    JQ初始化方法实际上有两种,由于美元符号可以定义 jQuery,那么就有三种方法可以进行初始化操作,根据个人习惯来选择吧! 第一种 $(document).ready(function(){ // j ...

  3. SQL Server监控报警架构_如何添加报警

    一.数据库邮件报警介绍 数据库邮件是从SQL Server数据库引擎发送电子邮件企业解决方案,使用简单传输协议(SMTP)发送邮件.发送邮件进程与数据库的进程隔离,因此可不用担心影响数据库服务器. 数 ...

  4. 配置tomcat系统日志--java eclipse

    控制台那里的日志只是部分,有时候报错了我们并没有显示出来,所以需要找到系统日志... 双击tomcat v.80 Service---点击open lauch Configuration--Argum ...

  5. Mac Pro 编译安装 Redis 的 PHP 客户端 phpredis

    1.去官网下载 redis 扩展源码包 https://github.com/phpredis/phpredis 2.安装 redis 扩展 /usr/local/src/mac-sdk/source ...

  6. canvas九宫格跑马灯

    canvas九宫格跑马灯抽奖 之前用dom写了一版,部分 安卓机会卡顿,换用canvas dom版本九宫格抽奖

  7. 初识java泛型

    1 协变数组类型(covariant array type) 数组的协变性: if A IS-A B then A[] IS-A B[] 也就是说,java中的数组兼容,一个类型的数组兼容他的子类类型 ...

  8. C#高级编程笔记2016年10月12日 运算符重载

    1.运算符重载:运算符重重载的关键是在对象上不能总是只调用方法或属性,有时还需要做一些其他工作,例如,对数值进行相加.相乘或逻辑操作等.例如,语句if(a==b).对于类,这个语句在默认状态下会比较引 ...

  9. grep 命令

    简单介绍:grep命令是用于分析一行信息,若当中有我们所需要的信息,就将该行取出来. 语法结构:grep [-acinv] [--color=auto] '查找关键字' #{filename} -a: ...

  10. python之路二十一

    URL        - 两个    Views        - 请求的其他信息        from django.core.handlers.wsgi import WSGIRequest   ...