DOM0 级事件模型(模拟器不支持)

DOM0 级事件绑定 在 移动端有 300ms 的延迟

ontouchstart

手指按下事件

ontouchmove

手指移动事件

pntouchend

手指离开事件

DOM2 级事件模型(项目)

  • 手指按下事件

ele.addEventListener("touchstart", func1, false);

  • 手指移动事件

ele.addEventListener("touchmove", func2, false);

  • TouchEvent

手指列表:(都是 伪数组)

  • changedTouches        目标元素 目标事件 上的手指列表0

    • e.changedTouches[0].clientX;
    • e.changedTouches[0].clientY;
  • targetTouches         目标元素上的手指列表
  • touches        屏幕上的手指列表
  • 手指离开事件

ele.addEventListener("touchend", func3, false);

禁止浏览器默认行为(长按复制文本)

// 手机上你滑动的时候他本身就有个默认的滚屏

// 因此如果你要操作操作你个dom元素,用touchmove事件,这其实也是滑动

// 原本你的效果是要在dom上滑动然后产生相应的效果,这个时候你肯定不希望手机上的浏览器屏幕滚动

// 所以你应该把它默认的滚动给禁止了。这样才会有好的用户体验

document.addEventListener("touchstart", function(e){

e.preventDefault();        /* DOM2 清除默认行为 */

}, false);

准备工作

1. meta 标签(苹果发明的,PC 浏览器不支持)

<meta name="viewport" content="width=device-width",initial-scale=1.0, user-scalable=no />        完美视口

如果 页面存在一个太大的元素,只用了 width=device-width    initial-scale=1.0 的一个,一些浏览器会扩展布局视口的宽度来容纳此元素

如果 width=device-width    initial-scale=1.0 都写了,则大部分的浏览器不会改变布局视口

initial-scale    是系统初始缩放比例,随着 视觉视口 改变而改变。参照理想视口 375

user-scalable    是否允许用户进行缩放        默认允许

minimum-scale    允许缩放的最小比例        看公司规定    大多数 1

maximumscale    运算缩放的最大比例        看公司规定    大多数  1

target-desitydpi        基本不用,因为 webkit 内核不支持了

2. 清除默认样式

3. 清除系统滚动条

4. 取消默认行为

5. 适配

6. 点透处理

mobile_基础事件的更多相关文章

  1. 【深入浅出Linux网络编程】 “基础 -- 事件触发机制”

    回顾一下“"开篇 -- 知其然,知其所以然"”中的两段代码,第一段虽然只使用1个线程但却也只能处理一个socket,第二段虽然能处理成百上千个socket但却需要创建同等数量的线程 ...

  2. 第一百六十九节,jQuery,基础事件

    jQuery,基础事件 学习要点: 1.绑定事件 2.简写事件 3.复合事件 JavaScript 有一个非常重要的功能,就是事件驱动.当页面完全加载后,用户通过鼠标 或键盘触发页面中绑定事件的元素即 ...

  3. C#基础---事件的使用

    一:什么是事件     事件是可以被控件识别的操作,如按下确定按钮,选择某个单选按钮或者复选框.每一种控件有自己可以识别的事件,如窗体的加载.单击.双击等事件,编辑框(文本框)的文本改变事件,等等.事 ...

  4. 9、网页制作Dreamweaver(jQuery基础:事件)

    事件 定义 即当HTML中发生某些事(点击.鼠标移过等)的时候调用的方法 $(selector).action() 触发 事件的触发有两种方法: 1.直接将事件click写在<javascrip ...

  5. JS基础——事件绑定

    上一篇博客JS事件对象中,老师问JS事件处理和VB中的事件处理有什么联系?先来解决一下这个问题.举个VB.net中事件处理的样例(JS敲久了,VB习惯的都不熟悉了,看来得常常回想了): 1.事件处理V ...

  6. javascript基础-事件1

    原理 事件分两种.第一种浏览器事件,由浏览器抛出事件,它是人机交互的基础:第二种自定义事件,由程序员抛出事件,它是模拟事件流程.两者都是为了完成数据的传递. 浏览器事件 机制 冒泡和捕获两种机制.因I ...

  7. javascript基础-事件2

    DOM0,DOM2,DOM3事件类型 图解: 范畴 响应顺序(标:标准浏览器.IE9+) 注意点 MouseEvent 标: mousedown-mouseup-click-mousedown-mou ...

  8. jQuery事件篇---基础事件

    写在前面: 有一段时间未更新博客了,利用这段时间,重新看了<jQuery基础教程 第四版>和<锋利的jQuery 第二版>,这两本书绝对是jQuery入门非常好的书,值得多读几 ...

  9. C#基础-事件 继承类无法直接引发基类的事件

    An event can be raised only from the declaration space in which it is declared. Therefore, a class c ...

随机推荐

  1. requests.session

    # -*- coding: utf-8 -*- """requests.session~~~~~~~~~~~~~~~~ This module provides a Se ...

  2. luogu 3166 组合与gcd(数三角形)结论

    在n*m的点格图中选取三个点满足三角形的个数 结论:点(x1,y1)和(x2,y2) 中间有gcd(x2-x1,y2-y1)+1个和两点连成的线段直线共线 那么大力枚举 x2-x1和y2-y1,然后发 ...

  3. luogu 4042 有后效性的dp

    存在有后效性的dp,但转移方程 f[i] = min( f[i], s[i] + sigma f[j] ( j 是后效点) ) 每次建当前点和 转移点的边 e1, 某点和其会影响的点 e2 spfa ...

  4. luogu P5289 [十二省联考2019]皮配

    传送门 首先考虑一个正常的dp,设\(f_{i,j,k}\)为前\(i\)个学校,\(j\)人在\(\color{#0000FF}{蓝阵营}\),\(k\)人在\(\color{#654321}{吔} ...

  5. 使用IntelliJ IDEA 配置Maven(转)

    1. 下载Maven 官方地址:http://maven.apache.org/download.cgi 解压并新建一个本地仓库文件夹 2.配置本地仓库路径 3.配置maven环境变量 4.在Inte ...

  6. https协议的简单理解

    本片文章梳理三个知识点: 1.对称加密和非对称加密的区别 2.https协议的请求流程 3.http协议和https协议的区别 一.对称加密和非对称加密 对称加密:加密和解密使用同一密钥. 非对称加密 ...

  7. C#(在WeBAPI)获取Oracle(在PL/SQL)游标类型的存储过程(用到了RefCursor)

    需求:WebAPI服务端,通过Oracle数据库的存储过程,获取数据. 在PL/SQL 建立存储过程:(先来最简单的,就是把整个表都查出来) create or replace procedure S ...

  8. Django之分页

    需要知道:每页多少条数据.一共多少条数据.一共需要多少页.每页从哪开始到哪结束 注意问题:1.用户输入页码为非数字.  2.用户输入页码超出页码范围 def books(request): try: ...

  9. 006_设置执行命令提示和unset shell function

    一.unset不能unset只读变量 问题: [root@zb1-bdwaimai-inf-wfe-28 ~]# source ~/.bash_profile bash: PROMPT_COMMAND ...

  10. Node-SASS安装 scss

    今天第一次用vue-cli 构建一个项目时, 前期一直很正常, 在编写了sass 时就报错了,  错误如下 This dependency was not found: * !!vue-style-l ...