jQuery-Extensions-touchJS

jQuery-Extensions-touchJS是一个非常简单的jQuery touch扩展,用于适配移动端的常用touch操作(点击tab、双击dbTab、长按longPress、长按终止longPressCancel、滑动swipe以及具体滑动方向left、right、up、down),并兼容鼠标手势操作

Dieses Skript sollte nicht direkt installiert werden. Es handelt sich hier um eine Bibliothek für andere Skripte, welche über folgenden Befehl in den Metadaten eines Skriptes eingebunden wird // @require https://update.greasyfork.org/scripts/454450/1156520/jQuery-Extensions-touchJS.js

Du musst eine Erweiterung wie Tampermonkey, Greasemonkey oder Violentmonkey installieren, um dieses Skript zu installieren.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

Sie müssten eine Skript Manager Erweiterung installieren damit sie dieses Skript installieren können

(Ich habe schon ein Skript Manager, Lass mich es installieren!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

Autor
tutu辣么可爱
Version
1.8
Erstellt am
08.11.2022
Letzte Aktualisierung
02.03.2023
Größe
7,74 KB
Lizenz
n/a

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事件相关
//禁用所有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