jQuery.Touch

jQuery.Touch

GitHub 项目地址 官方网址

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 将在调用时传递到处理函数中。类型为字符串,具有代表滑动方向的八个值之一。可能的值是 leftupleftupuprightrightdownrightdowndownleft

赞(1) 打赏
取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

    暂无评论...