אין להתקין סקריפט זה ישירות. זוהי ספריה עבור סקריפטים אחרים // @require https://update.greasyfork.org/scripts/454450/1156520/jQuery-Extensions-touchJS.js
jQuery-Extensions-touchJS
- 一个非常简单的jQuery touch扩展,用于适配移动端的常用touch操作,兼容鼠标手势操作
- 支持的touch事件:开始start、终止end、点击tab、双击dbTab、长按longPress、长按终止longPressCancel、滑动swipe,以及具体滑动方向(左left、右right、上up、下down)
- 原生js请使用普通js版本:js-Extensions-touchJS
参数说明
$.touch(evt,fn,fnName)
参数 |
参数类型 |
是否可缺省 |
其他说明 |
evt |
字符串 |
不可缺省 |
指定监听的事件类型 (具体请见下方事件列表) |
fn |
方法 |
不可缺省 |
所监听事件类型发生时,事件处理方法,可接收一个JSON参数 |
fnName |
字符串 |
可缺省 默认值为fn的方法名 (若fn不为匿名方法) |
本次事件的事件名。同一事件类型下事件名具有唯一性 |
$.unbindTouch(evt,fnName)
参数 |
参数类型 |
是否可缺省 |
其他说明 |
evt |
字符串 |
不可缺省 |
指定需要删除的事件类型 (具体请见下方事件列表) |
fnName |
字符串 |
可缺省 默认值为null |
指定需要删除的事件。若为null,则删除evt指定事件类型所有事件 |
$.aboutTouch(query)
参数 |
参数类型 |
是否可缺省 |
其他说明 |
query |
字符串 |
可缺省 默认值为null |
获取touchJS相关信息。若为null则获取所有信息(JSON类型) 也可指定获取的信息:name、version、description、author、url、event |
事件列表
类型 |
说明 |
参数 |
start |
触控开始或鼠标按下事件 |
{ target:dom对象, 0:{x:事件发生时的x坐标,y:事件发生时的y坐标} } |
end |
触控结束或鼠标松开事件 |
{ target:dom对象, 0:{x:事件发生时的x坐标,y:事件发生时的y坐标} } |
tab |
屏幕点击事件 |
{ target:dom对象, 0:{x:事件发生时的x坐标,y:事件发生时的y坐标} } |
dbTab |
屏幕双击事件 |
{ target:dom对象, 0:{x:事件发生时的x坐标,y:事件发生时的y坐标} } |
longPress |
屏幕长按事件 |
{ target:dom对象, 0:{x:事件发生时的x坐标,y:事件发生时的y坐标} } |
longPressCancel |
屏幕长按取消事件 |
{ target:dom对象, 0:{x:事件发生时的x坐标,y:事件发生时的y坐标} } |
swipe |
屏幕滑动事件 |
{ target:dom对象, 0:{x:事件发生时的x坐标,y:事件发生时的y坐标}, 1:{x:事件执行时的x坐标,y:事件执行时的y坐标} } |
left |
屏幕左滑事件 (同时触发swipe事件) |
{ target:dom对象, 0:{x:事件发生时的x坐标,y:事件发生时的y坐标}, 1:{x:事件执行时的x坐标,y:事件执行时的y坐标} } |
right |
屏幕右滑事件 (同时触发swipe事件) |
{ target:dom对象, 0:{x:事件发生时的x坐标,y:事件发生时的y坐标}, 1:{x:事件执行时的x坐标,y:事件执行时的y坐标} } |
up |
屏幕上滑事件 (同时触发swipe事件) |
{ target:dom对象, 0:{x:事件发生时的x坐标,y:事件发生时的y坐标}, 1:{x:事件执行时的x坐标,y:事件执行时的y坐标} } |
down |
屏幕下滑事件 (同时触发swipe事件) |
{ target:dom对象, 0:{x:事件发生时的x坐标,y:事件发生时的y坐标}, 1:{x:事件执行时的x坐标,y:事件执行时的y坐标} } |
注:上述中json参数内的x,y坐标,是以屏幕左上角为坐标原点,其单位为px
使用方式
//指定事件名(可省略,但省略后无法指定删除此事件)
$(selector).touch("longPress",()=>{//具体业务},"myLongPress")
//或者指定方法
myLongPress=function(){//具体业务}
$(selector).touch("longPress",myLongPress)
$(selector).touch({
//可通过myLongPress方法名指定删除此事件
longPress:myLongPress,
//无法指定删除
longPressCancel(){//具体业务},
tap(){//具体业务}
})
//删除longPress所有事件,格杀勿论
$(selector).unbindTouch("longPress")
//通过指定事件名确认唯一事件(添加事件时指定)
$(selector).unbindTouch("longPress","myLongPress")
//或者通过指定方法确认唯一事件
$(selector).unbindTouch("longPress",myLongPress)
//禁用所有touchJS事件(仅限于通过本插件产生的事件方法)
$(selector).attr("touchJS-disabled","")
$(selector).attr("touchJS-disabled","all")
$(selector).attr("touchJS-disabled","*")
//禁用指定touchJS事件(仅限于通过本插件产生的事件方法)
$(selector).attr("touchJS-disabled","tap")
$(selector).attr("touchJS-disabled","longPress")
$(selector).attr("touchJS-disabled","tap,dbTap,longPress")
//查看所有touchJS事件(仅限于通过本插件产生的事件方法)
$(selector)[0].libForTouchJsExt