mobile_基础事件
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_基础事件的更多相关文章
- 【深入浅出Linux网络编程】 “基础 -- 事件触发机制”
回顾一下“"开篇 -- 知其然,知其所以然"”中的两段代码,第一段虽然只使用1个线程但却也只能处理一个socket,第二段虽然能处理成百上千个socket但却需要创建同等数量的线程 ...
- 第一百六十九节,jQuery,基础事件
jQuery,基础事件 学习要点: 1.绑定事件 2.简写事件 3.复合事件 JavaScript 有一个非常重要的功能,就是事件驱动.当页面完全加载后,用户通过鼠标 或键盘触发页面中绑定事件的元素即 ...
- C#基础---事件的使用
一:什么是事件 事件是可以被控件识别的操作,如按下确定按钮,选择某个单选按钮或者复选框.每一种控件有自己可以识别的事件,如窗体的加载.单击.双击等事件,编辑框(文本框)的文本改变事件,等等.事 ...
- 9、网页制作Dreamweaver(jQuery基础:事件)
事件 定义 即当HTML中发生某些事(点击.鼠标移过等)的时候调用的方法 $(selector).action() 触发 事件的触发有两种方法: 1.直接将事件click写在<javascrip ...
- JS基础——事件绑定
上一篇博客JS事件对象中,老师问JS事件处理和VB中的事件处理有什么联系?先来解决一下这个问题.举个VB.net中事件处理的样例(JS敲久了,VB习惯的都不熟悉了,看来得常常回想了): 1.事件处理V ...
- javascript基础-事件1
原理 事件分两种.第一种浏览器事件,由浏览器抛出事件,它是人机交互的基础:第二种自定义事件,由程序员抛出事件,它是模拟事件流程.两者都是为了完成数据的传递. 浏览器事件 机制 冒泡和捕获两种机制.因I ...
- javascript基础-事件2
DOM0,DOM2,DOM3事件类型 图解: 范畴 响应顺序(标:标准浏览器.IE9+) 注意点 MouseEvent 标: mousedown-mouseup-click-mousedown-mou ...
- jQuery事件篇---基础事件
写在前面: 有一段时间未更新博客了,利用这段时间,重新看了<jQuery基础教程 第四版>和<锋利的jQuery 第二版>,这两本书绝对是jQuery入门非常好的书,值得多读几 ...
- C#基础-事件 继承类无法直接引发基类的事件
An event can be raised only from the declaration space in which it is declared. Therefore, a class c ...
随机推荐
- win7 远程连接服务器出现身份验证错误,又找不到加密Oracle修正
今天想用远程桌面连接登录服务器,结果,弹出一个错误的提示框:发生身份验证错误,要求的函数不受支持. 然后在网上找了相关的教程,基本上所有的方法都是如下所示: 策略路径:"计算机配置" ...
- mysql递归
sql Server可以用with as 语法,mysql没有这个功能,只能用别的方式了,目前的mysql版本中并不支持直接的递归查询,但是通过递归到迭代转化的思路,还是可以在一句SQL内实现树的递归 ...
- [再寄小读者之数学篇](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}^{ ...
- kde钱包 忘记密码
转自 https://forum.suse.org.cn/t/kwallet/4367/2 修改 ~/.config/kwalletrc文件的First Use=false 改成 true 应该可以重 ...
- mysql 分库分表 ~ ShardingSphere生态圈
一 简介 Apache ShardingSphere是一款开源的分布式数据库中间件组成的生态圈二 成员包含 Sharding-JDBC是一款轻量级的Java框架,在JDBC层提供上述核心功能 ...
- 老师博客copy -高阶函数2
新闻 管理 Py西游攻关之函数 一 函数是什么? 函数一词来源于数学,但编程中的「函数」概念,与数学中的函数是有很大不同的,具体区别,我们后面会讲,编程中的函数在英文中也有很多不同的叫法.在B ...
- POJ 2031 Building a Space Station (计算几何+最小生成树)
题目: Description You are a member of the space station engineering team, and are assigned a task in t ...
- HTTP协议08-请求首部字段
请求首部字段 请求首部字段是从客户端往服务器端发送请求报文中所使用的字段,用于补充请求的附加信息.客户端信息,对响应内容相关的优先级等内容 1)Accept 通知服务器,用户代理能够处理的媒体类型及媒 ...
- C++设计模式——职责链模式
什么是职责链模式? 在GOF的<设计模式:可复用面向对象软件的基础>一书中对职责链模式是这样说的:使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系.将这些对象连成一条 ...
- Android串口通信(Android Studio)
gilhub上已有开源项目: https://github.com/cepr/android-serialport-api 可以直接使用