素材巴巴 > 程序开发 >

事件(touch.js)

程序开发 2023-09-19 12:47:43

基本事件:

touchstart 手指刚接触屏幕时触发

touchmove 手指在屏幕上移动时触发

touchend 手指从屏幕上移开时触发

touchcancel 触摸过程被系统取消时触发(少用)

一、事件绑定(常用,重要)

touch.on( element, types, callback );

功能描述:事件绑定方法,根据参数区分事件绑定和事件代理。

参数描述:

参数类型描述elementelement或string元素对象、选择器typesstring事件的类型(多为手势事件),可接受多个事件以空格分开;支持原生事件的透传callbackfunction事件处理函数, 移除函数与绑定函数必须为同一引用;

部分手势事件

分类参数描述缩放pinchstart缩放手势起点pinchend缩放手势终点pinch缩放手势pinchin收缩pinchout放大旋转rotateleft向左旋转rotateright向右旋转rotate旋转 滑动swipestart滑动手势起点swiping滑动中swipeend滑动手势终点swipeleft向左滑动swiperight向右滑动swipeup向上滑动swipedown向下滑动swipe滑动 拖动开始dragstart拖动屏幕拖动drag拖动手势拖动结束dragend拖动屏幕拖动drag拖动手势长按hold长按屏幕敲击tap单击屏幕doubletap双击屏幕

部分事件处理

属性描述originEvent触发某事件的原生对象type事件的名称rotation旋转角度scale

缩放比例

direction操作的方向属性fingersCount操作的手势数量 position相关位置信息, 不同的操作产生不同的位置信息distanceswipe类两点之间的位移distanceX, x手势事件x方向的位移值, 向左移动时为负数distanceY, y手势事件y方向的位移值, 向上移动时为负数 anglerotate事件触发时旋转的角度durationtouchstart 与 touchend之间的时间戳factorswipe事件加速度因子startRotate启动单指旋转方法,在某个元素的touchstart触发时调用

旋转rotate

》滑动swiper

拖动drag

二、事件配置

touch.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类事件开关

}

三、事件代理

touch.on( delegateElement, types, selector, callback );

功能描述:事件代理方法。

参数描述:

参数类型描述delegateElementelement或string事件代理元素或选择器typesstring手势事件的类型, 可接受多个事件以空格分开;支持原生事件的透传。selectorstring代理子元素选择器,callbackfunction事件处理函数,如需了解手势库支持的新属性

四、解除事件代理、解除事件绑定

touch.off( delegateElement, types, selector, callback )//解除某元素上的事件代理。

touch.off( element, types, callback )//解除某元素上的事件绑定,根据参数区分事件绑定和事件代理。

五、触发事件

touch.trigger(element, type);

功能描述:触发某个元素上的某事件。

参数描述:同上 


标签:

上一篇: 树状图布局插件介绍 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。