jQuery.Touch

GitHub 项目地址 官方网址

jQuery.Touch 一组 jQuery 插件，用于在不同浏览器中统一处理鼠标/触摸事件。

它包含 4 个文件：

引用

<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
    });

direction 参数值

direction 将在调用时传递到处理函数中。类型为字符串，具有代表滑动方向的八个值之一。可能的值是 left，upleft，up，upright，right，downright，down 或 downleft。

转载请注明出处：吖Go博客 » jQuery.Touch