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. win7 远程连接服务器出现身份验证错误,又找不到加密Oracle修正

    今天想用远程桌面连接登录服务器,结果,弹出一个错误的提示框:发生身份验证错误,要求的函数不受支持. 然后在网上找了相关的教程,基本上所有的方法都是如下所示: 策略路径:"计算机配置" ...

  2. mysql递归

    sql Server可以用with as 语法,mysql没有这个功能,只能用别的方式了,目前的mysql版本中并不支持直接的递归查询,但是通过递归到迭代转化的思路,还是可以在一句SQL内实现树的递归 ...

  3. [再寄小读者之数学篇](2014-05-28 Ladyzhenskaya 不等式)

    $$\bex f\in C_c^\infty(\bbR^2)\ra \sen{f}_{L^4}\leq \sqrt{2} \sen{f}_{L^2}^{1/2} \sen{\p_1f}_{L^2}^{ ...

  4. kde钱包 忘记密码

    转自 https://forum.suse.org.cn/t/kwallet/4367/2 修改 ~/.config/kwalletrc文件的First Use=false 改成 true 应该可以重 ...

  5. mysql 分库分表 ~ ShardingSphere生态圈

    一  简介   Apache ShardingSphere是一款开源的分布式数据库中间件组成的生态圈二 成员包含   Sharding-JDBC是一款轻量级的Java框架,在JDBC层提供上述核心功能 ...

  6. 老师博客copy -高阶函数2

    新闻 管理   Py西游攻关之函数   一 函数是什么? 函数一词来源于数学,但编程中的「函数」概念,与数学中的函数是有很大不同的,具体区别,我们后面会讲,编程中的函数在英文中也有很多不同的叫法.在B ...

  7. POJ 2031 Building a Space Station (计算几何+最小生成树)

    题目: Description You are a member of the space station engineering team, and are assigned a task in t ...

  8. HTTP协议08-请求首部字段

    请求首部字段 请求首部字段是从客户端往服务器端发送请求报文中所使用的字段,用于补充请求的附加信息.客户端信息,对响应内容相关的优先级等内容 1)Accept 通知服务器,用户代理能够处理的媒体类型及媒 ...

  9. C++设计模式——职责链模式

    什么是职责链模式? 在GOF的<设计模式:可复用面向对象软件的基础>一书中对职责链模式是这样说的:使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系.将这些对象连成一条 ...

  10. Android串口通信(Android Studio)

    gilhub上已有开源项目: https://github.com/cepr/android-serialport-api 可以直接使用