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 ...
随机推荐
- requests.session
# -*- coding: utf-8 -*- """requests.session~~~~~~~~~~~~~~~~ This module provides a Se ...
- luogu 3166 组合与gcd(数三角形)结论
在n*m的点格图中选取三个点满足三角形的个数 结论:点(x1,y1)和(x2,y2) 中间有gcd(x2-x1,y2-y1)+1个和两点连成的线段直线共线 那么大力枚举 x2-x1和y2-y1,然后发 ...
- luogu 4042 有后效性的dp
存在有后效性的dp,但转移方程 f[i] = min( f[i], s[i] + sigma f[j] ( j 是后效点) ) 每次建当前点和 转移点的边 e1, 某点和其会影响的点 e2 spfa ...
- luogu P5289 [十二省联考2019]皮配
传送门 首先考虑一个正常的dp,设\(f_{i,j,k}\)为前\(i\)个学校,\(j\)人在\(\color{#0000FF}{蓝阵营}\),\(k\)人在\(\color{#654321}{吔} ...
- 使用IntelliJ IDEA 配置Maven(转)
1. 下载Maven 官方地址:http://maven.apache.org/download.cgi 解压并新建一个本地仓库文件夹 2.配置本地仓库路径 3.配置maven环境变量 4.在Inte ...
- https协议的简单理解
本片文章梳理三个知识点: 1.对称加密和非对称加密的区别 2.https协议的请求流程 3.http协议和https协议的区别 一.对称加密和非对称加密 对称加密:加密和解密使用同一密钥. 非对称加密 ...
- C#(在WeBAPI)获取Oracle(在PL/SQL)游标类型的存储过程(用到了RefCursor)
需求:WebAPI服务端,通过Oracle数据库的存储过程,获取数据. 在PL/SQL 建立存储过程:(先来最简单的,就是把整个表都查出来) create or replace procedure S ...
- Django之分页
需要知道:每页多少条数据.一共多少条数据.一共需要多少页.每页从哪开始到哪结束 注意问题:1.用户输入页码为非数字. 2.用户输入页码超出页码范围 def books(request): try: ...
- 006_设置执行命令提示和unset shell function
一.unset不能unset只读变量 问题: [root@zb1-bdwaimai-inf-wfe-28 ~]# source ~/.bash_profile bash: PROMPT_COMMAND ...
- Node-SASS安装 scss
今天第一次用vue-cli 构建一个项目时, 前期一直很正常, 在编写了sass 时就报错了, 错误如下 This dependency was not found: * !!vue-style-l ...