页面控制--移动端开发手势库Hammer.JS使用文档

Hammer.js 是一个轻量级的JavaScript库，用于为移动设备提供触摸手势。以下是如何使用 Hammer.js 来监听和响应不同的触摸手势。

1. 引入 Hammer.js 库

<script src="https://cdn.jsdelivr.net/npm/hammer-js@2.0.8/hammer.min.js"></script>

2. 创建一个Manager实例并绑定到一个元素

var element = document.getElementById('myElement');
var mc = new Hammer.Manager(element);

3. 定义你想要监听的手势

mc.add( new Hammer.Pan({ direction: Hammer.DIRECTION_ALL, threshold: 0 }) );
mc.add( new Hammer.Press({ time: 500, threshold: 8 }) );
mc.add( new Hammer.Rotate({ enable: false }) );
mc.add( new Hammer.Pinch({ enable: false }) );

4. 绑定事件监听器

mc.on("panstart panmove panend tap press", function(ev) {
    switch(ev.type) {
        case "tap":
            console.log("Tap!");
            break;
        case "panstart":
            console.log("Pan start!");
            break;
        case "panmove":
            console.log("Panning...");
            break;
        case "panend":
            console.log("Pan end!");
            break;
        case "press":
            console.log("Press!");
            break;
        default:
            console.log(ev.type);
    }
});

5. 初始化Manager

mc.recognizers[0].requireFailure = [mc.recognizers[1]];
mc.recognizers[2].requireFailure = [mc.recognizers[3]];
mc.get('pinch').set({ enable: true });
mc.get('rotate').set({ enable: true });
mc.emit = Hammer.emit;
mc.on = Hammer.on;
mc.off = Hammer.off;
mc.destroy = Hammer.destroy;
mc.stop = Hammer.stop.bind(Hammer);
mc.recognize = mc.session.recognize.bind(mc.session);
mc.css = {};
mc.touchAction = '';
mc.set = function(options) {
    Hammer.merge(mc, options);
};
mc.destroy();
mc.hammer = null;
mc.offcanvas = false;
mc.initialized = true;

以上代码展示了如何使用 Hammer.js 来监听和处理触摸事件。你可以根据需要添加或移除手势识别器，并定义相应的事件处理程序。