Hammer.js 单击和双击处理有问题

使用 hammer.js 默认的 doubletap :

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>Document</title>
        <style media="screen">
            .box {
                width: 400px;
                height: 400px;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="box">

        </div>
        <script src="js/hammer.js" charset="utf-8"></script>
        <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function () {
            var myElement = document.querySelector('.box')

            var hammer = new Hammer(myElement)

            hammer.on('doubletap', function (e) {
                console.log(e.type)
            }).on('tap', function (e) {
                console.log(e.type)
            })
        })
        </script>
    </body>
    </html>

当我双击时，它会打印两次 'tap' 和一次 'doubletap', 这是符合预期的。但是我希望它触发 doubletap 事件时不触发 tap 事件，按着官网的说法 http://hammerjs.github.io/require-failure/

我把它改成了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <style media="screen">
        .box {
            width: 400px;
            height: 400px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
    <script src="js/hammer.js" charset="utf-8"></script>
    <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function () {
        var myElement = document.querySelector('.box')

        var hammer = new Hammer(myElement)
        var singleTap = new Hammer.Tap({ event: 'singletap' });
        var doubleTap = new Hammer.Tap({event: 'doubletap', taps: 2 });

        hammer.add([doubleTap, singleTap]);

        doubleTap.recognizeWith(singleTap);

        singleTap.requireFailure([doubleTap]);
        hammer.on('doubletap', function (e) {
            console.log(e.type)
        }).on('singletap', function (e) {
            console.log(e.type)
        })
    })
    </script>
</body>
</html>

但是没有任何效果！双击时它居然什么都不打印了，也没有什么报错信息。找了一天了也没有找到原因，而我上面的代码是完全按照官网上那段代码来的。

我这么改了下，是可以用的：

document.addEventListener("DOMContentLoaded", function () {
    var myElement = document.querySelector('.box')

    var hammer = new Hammer.Manager(myElement);

    hammer.add( new Hammer.Tap({ event: 'doubletap', taps: 2 }) );
    hammer.add( new Hammer.Tap({ event: 'singletap' }) );

    hammer.get('doubletap').recognizeWith('singletap');
    hammer.get('singletap').requireFailure('doubletap');


    hammer.on('doubletap', function(ev) {
        console.log(ev.type);
    }).on('singletap', function(ev) {
        console.log(ev.type);
    });
});

补充：

文档关于Hammer构造器的描述：

既然我们需要的是自定义的doubletap和singletap，那显然在最一开始只接使用new Hammer(myElement)就不合适了。这个应该是你那段代码问题的关键

【热门文章】