Hammer.js事件互斥重叠之requireFailure与recognizeWith

本文简单记录下hammer.js的事件重叠与互斥问题,如有不当之处望指出,谢谢!

版本:Hammer.JS - v2.0.8

先说说recognizeWith,这个很好理解,就是可以同时辨识多重手势事件,比如,单击.recognizeWith(双击) 的情况下,点击两下,这会触发单击(调用两次单击回调)和双击事件(调用一次双击回调);

requireFailure的作用大家可以自己看原文,我的个人理解比如,在 单击.recognizeWith(双击) 然后 单击.requireFailure(双击) 的情况下,它会在第二次点击后,也就是双击后触发 单击的回调函数,而不会触发双击的回调,简单点理解就是满足单击的条件后,双击就不用管它了;

以下是实验代码,有需要的可以跑一下看看:

var doc = document;
(function(){
    var box = doc.getElementById("box");
    var hm = new Hammer.Manager(box);
    var singletap = new Hammer.Tap({event: 'singletap'});
    var doubletap = new Hammer.Tap({event: 'doubletap', taps: 2});

    var panh = new Hammer.Pan({event: 'panh', direction: Hammer.DIRECTION_HORIZONTAL});
    var panv = new Hammer.Pan({event: 'panv', direction: Hammer.DIRECTION_VERTICAL});
    var swipe = new Hammer.Swipe();

    hm.add([panh, panv, singletap, doubletap, swipe]);

    doubletap.recognizeWith(singletap);
    singletap.requireFailure(doubletap);
    //swipe.recognizeWith(panh);
    //panv.requireFailure(panh);
    //swipe.requireFailure(panh);
    //*
    hm.on('panh', function(e) {
        console.log('panh event');
        console.log(e);
    });
    hm.on('panv', function(e) {
        console.log('panv event');
        console.log(e);
    });
    //*/
    hm.on('doubletap', function(e) {
        console.log('doubletap event');
        console.log(e);
    });
    hm.on('singletap', function(e) {
        console.log('singletap event');
        console.log(e);
    });
    hm.on('swipe', function(e) {
        console.log('swipe event');
        console.log(e);
    });
})();

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

小问_

你得鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值