jQuery.Touch
jQuery.Touch
一组 jQuery
插件,用于在不同浏览器中统一处理鼠标/触摸事件。
它包含 4 个文件:
文件 | 描述 |
---|---|
jquery.touch.js | 该文件包含处理所有触摸,指针和单击事件并触发统一触摸事件的函数。 |
jquery.gesture.js | 处理触摸事件,并将基于两个触摸点触发手势事件。需要包含 jquery.touch.js 。 |
jquery.gesture2.js | 处理手势事件,并将转换(移动/缩放/旋转)为 jQuery 对象。需要包含 jquery.touch.js 和 jquery.gesture.js 两个文件。 |
jquery.swipe.js | 处理触摸事件,并将触发滑动事件。需要包含 jquery.touch.js 。 |
引用
<script src="https://cdn.jsdelivr.net/gh/a-fung/jquerytouch/jquery.touch.js"></script>
<script src="https://cdn.jsdelivr.net/gh/a-fung/jquerytouch/jquery.swipe.js"></script>
<script src="https://cdn.jsdelivr.net/gh/a-fung/jquerytouch/jquery.gesture.js"></script>
<script src="https://cdn.jsdelivr.net/gh/a-fung/jquerytouch/jquery.gesture2.js"></script>
jquery.touch.js
用法
初始化
$("#touch-target").touchInit();
Options 可选参数
$("#touch-target").touchInit({
preventDefault: true, // 阻止默认的点击/触摸处理程序
mouse: true, // 是否应从鼠标事件触发统一触摸事件。
pen: true, // 是否应从笔输入触发统一触摸事件。
maxtouch: -1, // 处理和触发事件的最大同时点数。负数表示无限。
prefix: "" // 在触发触摸事件名称中添加前缀。当您要添加具有不同选项的处理程序时,此功能很有用。如果您my_以前缀形式传递,则事件名称touch_start将变为my_touch_start。touch_move和和相同touch_end。
});
事件
var start_handler = function (event) {
//
};
var move_handler = function (event) {
//
};
var end_handler = function (event) {
//
};
$("select").on("touch_start", start_handler);
$("select").on("touch_move", move_handler);
$("select").on("touch_end", end_handler);
jquery.swipe.js
使用jquery.swipe.js
先必须引用jquery.touch.js
用法
$("#touch-target").swipe(function(direction) {
// your handler code
});
Options 可选参数
$("#touch-target").swipe(
function(direction) {
// your handler code
},
{
preventDefault: true,
mouse: true,
pen: true,
distance: 50
});
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
preventDefault | 布尔值 | true | 阻止默认的点击/触摸处理程序 |
mouse | 布尔值 | true | 是否应用鼠标触发滑动事件。 |
pen | 布尔值 | true | 是否应用笔输入触发滑动事件。 |
distance | 数值 | 50 | 触发滑动之前触摸点移动的距离。 |
direction 参数值
direction
将在调用时传递到处理函数中。类型为字符串,具有代表滑动方向的八个值之一。可能的值是 left
,upleft
,up
,upright
,right
,downright
,down
或 downleft
。