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>
但是没有任何效果!双击时它居然什么都不打印了,也没有什么报错信息。找了一天了也没有找到原因,而我上面的代码是完全按照官网上那段代码来的。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我这么改了下,是可以用的:
补充:
文档关于
Hammer
构造器的描述: