一：移动端事件
恶性事件是文本文档或是电脑浏览器对话框中产生的，特殊的互动一瞬间。
二：绑定事件方法
1、element.type=function(){}
参数说明：
①、type：事件类型
②、function：当事件发生时运行的函数
案例：
var btn=document.getElementById("btn");btn.onclick=function(){ alert("我是第一种绑定事件的方法");}
2、addEventListener()
是一个侦听事件并处理相应的函数
语法：
element.addEventListener(type, handle, false);
参数说明
①、type: 事件触发类型，如click,keypress等等！
②、handle:事件处理函数，事件出发后，定义可能发生的变化！！
③、false: 表示事件冒泡模型，true：捕获。
案例：
var btn=document.getElementById("btn");//语法：对象.addEventListener(“事件名”,函数,布尔值)//注意：事件名不用加on//布尔值：默认是false false:冒泡 true：捕获btn.addEventListener("click",function(){ alert("我是第二种绑定事件的方法");},false)btn.removeEventListener("click",function(){ alert("我是第二种绑定事件的方法");},false);
3、jQuery on() 方法
在被选元素及子元素上添加一个或多个事件处理程序。
语法：
$(selector).on(event,childSelector,data,function)
参数说明：
①、 event 必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值，也可以是数组。必须是有效的事件。
②、childSelector 可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
③、data 可选。规定传递到函数的额外数据。
④、function 可选。当事件发生时运行的函数。
案例：
$("p").on("click",function(){ alert("段落被点击了。");});
三：click单击事件
单击事件，在移动端中，连续click的触发有200ms ~ 300ms的延迟。
1、出现300毫秒延迟原因
当用户一次点击屏幕之后，浏览器并不能立刻判断用户是要进行双击缩放，还是想要进行单击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。
2、语法
$("selector").on("click",function(event){...})
四：tap轻击事件
在用户轻击一个元素时触发
1、语法
$("selector").on("tap",function(event){...})
2、参数说明
function(event) 必须。指定 tap 事件触发时执行的函数。
3、事件分类
①、tap: 手指碰一下屏幕会触发
②、longTap: 手指长按屏幕会触发
③、singleTap: 手指碰一下屏幕会触发
④、doubleTap: 手指双击屏幕会触发
五：touch触摸事件
1、事件分类
①、touchstart：手指触摸到屏幕会触发
②、touchmove：当手指在屏幕上移动时，会触发
③、touchend：当手指离开屏幕时，会触发
④、touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件
2、跟踪触摸的属性
①、touches
表示当前跟踪的触摸操作的touch对象的数组（当一个手指在触屏上时，event.touches.length=1；当两个手指在触屏上时，event.touches.length=2，以此类推。）
②、changedTouches
导致触摸事件被触发的触摸点数组
③、targetTouches
特定于事件目标的touch对象数组
3、触摸事件坐标
①、clientX 触摸目标在视口中的x坐标
②、clientY 触摸目标在视口中的y坐标
③、identifier 标识触摸的唯一ID
④、pageX 触摸目标在页面中的x坐标
⑤、pageY 触摸目标在页面中的y坐标
⑥、screenX 触摸目标在屏幕中的x坐标（电脑屏幕）
⑦、screenY 触摸目标在屏幕中的y坐标（电脑屏幕）
⑧、target 触摸的DOM节点目标
注意：clientX/Y和pageX/Y的区别在于前者相对于视觉视口的左上角，后者相对布局视口的左上角。布局视口 是可以滚动的
4、案例（使用touch封装成单击事件，解决时间延迟！）
<body> <button id="btn">按钮</button> <script> function tap(ele, callback) { // 记录开始时间 var startTime = 0, // 控制允许延迟的时间 delayTime = 200, // 记录是否移动，如果移动，则不触发tap事件 isMove = false;
// 在touchstart时记录开始的时间 ele.addEventListener('touchstart', function (e) { startTime = Date.now(); });
// 如果touchmove事件被触发，则isMove为true ele.addEventListener('touchmove', function (e) { isMove = true; });
// 如果touchmove事件触发或者中间时间超过了延迟时间，则返回，否则，调用回调函数。 ele.addEventListener('touchend', function (e) { if (isMove || (Date.now() - startTime > delayTime)) { return; } else { callback(e); } }) }
var btn = document.getElementById('btn'); tap(btn, function () { alert('taped'); });</script></body>
六：swipe滑动事件
①、swipe：手指在屏幕上滑动时会触发
②、swipeLeft：手指在屏幕上向左滑动时会触发
③、swipeRight：手指在屏幕上向右滑动时会触发
④、swipeUp：手指在屏幕上向上滑动时会触发
⑤、swipeDown：手指在屏幕上向下滑动时会触发
七：Touch.js移动端事件库
是移动设备上的手势识别与事件库,是Web移动端touch点击事件不错的解决方案，由百度云Clouda团队维护，也是在百度内部广泛使用的开发工具。
1、事件绑定
touch.on(element, types, callback)
参数说明：
①、element：类型element或string， 元素对象、选择器
②、types：类型string ，事件的类型（多为手势事件），可接受多个事件以空格分开；支持原生事件的透传
③、callback：类型function， 事件处理函数, 移除函数与绑定函数必须为同一引用
2、解除事件绑定
touch.off（element，’types’,callback）
3、部分手势事件
①、缩放类
pinchstart：缩放手势起点
pinchend：缩放手势终点
pinch：缩放手势
pinchin：收缩
pinchout：放大
②、旋转类
rotateleft：向左旋转
rotateright：向右旋转
rotate：旋转
③、滑动类
swipestart：滑动手势起点
swiping：滑动中
swipeend：滑动手势终点
swipeleft：向左滑动
swiperight：向右滑动
swipeup：向上滑动
swipedown：向下滑动
swipe：滑动
④、拖动类
dragstart：拖动开始[拖动屏幕]
drag：拖动[拖动手势]
dragend：拖动结束[拖动屏幕]
⑤、敲击类
hold：长按屏幕
tap：单击屏幕
doubletap：双击屏幕
4、手势新增的属性
originEvent：触发某事件的原生对象
type：事件的名称
rotation：旋转角度
scale：缩放比例
direction：操作的方向属性
fingersCount：操作的手势数量
position：相关位置信息, 不同的操作产生不同的位置信息
distance：swipe类两点之间的位移
distanceX, x：手势事件x方向的位移值, 向左移动时为负数
distanceY, y：手势事件y方向的位移值, 向上移动时为负数
angle：rotate事件触发时旋转的角度
duration：touchstart 与 touchend之间的时间戳
factor：swipe事件加速度因子
startRotate：启动单指旋转方法，在某个元素的touchstart触发时调用
5、事件配置
touch.config(config)：对手势事件库进行全局配置。
参数描述：
config为一个对象
{ tap: true, //tap类事件开关, 默认为true doubleTap: true, //doubleTap事件开关， 默认为true hold: true, //hold事件开关, 默认为true holdTime: 650, //hold时间长度 swipe: true, //swipe事件开关 swipeTime: 300, //触发swipe事件的最大时长 swipeMinDistance: 18, //swipe移动最小距离 swipeFactor: 5, //加速因子, 值越大变化速率越快 drag: true, //drag事件开关 pinch: true, //pinch类事件开关}
6、应用举例
<script type="text/javascript"> touch.on('body', 'swipeleft swiperight', function(ev){ console.log("you have done", ev.type); });</script>
本文来源于：前端开发 | 移动端事件-变化吧门户
特别声明：以上文章内容仅代表作者本人观点，不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。
- 赞助本站
- 微信扫一扫
-
- 加入Q群
- QQ扫一扫
-
评论