<!DOCTYPE html> <html> <head> <meta content="width=device-width" /> <title>Rotate</title> <script src="https://www.jb51.net/Script/hammer.js"></script> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; } .test { width: 100%; height: 50%; background: #ffd800; text-align: left; } .result { width: 100%; height: 50%; background: #b6ff00; text-align: left; } </style> </head> <body> <div>事件区域</div> <div>事件结果：旋转触发<br /></div> <script type="text/javascript"> //创建一个新的hammer对象并且在初始化时指定要处理的dom元素 var hammertime = new Hammer(document.getElementById("test")); //为该dom元素指定触屏移动事件 hammertime.add(new Hammer.Rotate()); //添加事件 hammertime.on("rotate", function (e) { document.getElementById("result").innerHTML += "X偏移量：【" + e.deltaX + "】，Y偏移量：【" + e.deltaY + "】<br />"; //控制台输出 console.log(e); }); </script> </body> </html>
效果如下：
5、Swipe
代码如下：
<!DOCTYPE html> <html> <head> <meta content="width=device-width" /> <title>Swipe</title> <script src="https://www.jb51.net/Script/hammer.js"></script> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; } .test { width: 100%; height: 50%; background: #ffd800; text-align: left; } .result { width: 100%; height: 50%; background: #b6ff00; text-align: left; } </style> </head> <body> <div>事件区域</div> <div>事件结果：向左滑动触发<br /></div> <script type="text/javascript"> //创建一个新的hammer对象并且在初始化时指定要处理的dom元素 var hammertime = new Hammer(document.getElementById("test")); //添加事件 hammertime.on("swipeleft", function (e) { document.getElementById("result").innerHTML += "X偏移量：【" + e.deltaX + "】，Y偏移量：【" + e.deltaY + "】<br />"; //控制台输出 console.log(e); }); </script> </body> </html>
效果如下：
6、Tab
代码如下：
<!DOCTYPE html> <html> <head> <meta content="width=device-width" /> <title>Tap</title> <script src="https://www.jb51.net/Script/hammer.js"></script> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; } .test { width: 100%; height: 50%; background: #ffd800; text-align: left; } .result { width: 100%; height: 50%; background: #b6ff00; text-align: left; } </style> </head> <body> <div>事件区域</div> <div>事件结果：点击触发<br /></div> <script type="text/javascript"> //创建一个新的hammer对象并且在初始化时指定要处理的dom元素 var hammertime = new Hammer(document.getElementById("test")); //添加事件 hammertime.on("tap", function (e) { document.getElementById("result").innerHTML += "点击触发了，长按无效<br />"; //控制台输出 console.log(e); }); </script> </body> </html>
效果如下：
上述的实例还是有所区别的。在Pinch事件和Rotate事件中，我们用了hammertime.add(new Hammer.Pinch());和hammertime.add(new Hammer.Rotate ());而其他四个事件没有用，而是直接添加了事件的监听程序。原因在于，我们在new Hammer(htmlElement)的时候，Hammer.js默认对Pan、Press、Swipe和Tab事件进行了监听。但没有对Pinch和Rotate事件进行监听。