hammer.js

最新推荐文章于 2024-03-17 09:44:22 发布

ALSNEI

最新推荐文章于 2024-03-17 09:44:22 发布

阅读量2k

点赞数

分类专栏： JS 移动端问题文章标签： hammer.js 框架触控开源

本文链接：https://blog.csdn.net/ALSNEI/article/details/54428038

版权

JS 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

移动端问题

6 篇文章 0 订阅

订阅专栏

hammer.js

hammer.js是一个开源的库，他可以的实现在移端开发的大多数事件，如：点击、滑动、拖动、多点触控等事件。hammer.js不需要依赖任何其他的js框架，并且整个框架非常小.

1. Pan：拖动事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <style type="text/css">
    div{width: 100px;height: 100px;background: red;position: absolute;}
    </style>
</head>
<body>
    <div></div>
</body>
<script type="text/javascript" src="Hammer.js"></script>
<script type="text/javascript">
    var div = document.querySelector("div");
    // 创建Hammer对象
    var hDiv = new Hammer(div);

    var divLeft = 0;
    var divTop = 0;
    // 拖拽事件
    hDiv.on("panstart",function(){
        divLeft = div.offsetLeft;
        divTop = div.offsetTop;
    })
    // 拖拽移动事件
    hDiv.on("panmove",function(e){
        console.log(e.deltaX);
        div.style.left = e.deltaX + divLeft + "px";
        div.style.top = e.deltaY + divTop + "px";
    })
</script>
</html>

2. Pinch:多指触控事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <style type="text/css">
    div{width: 200px;height: 200px;background: red;position: absolute;}
    </style>
</head>
<body>
    <div>手势放大缩小div</div>
</body>
<script type="text/javascript" src="Hammer.js"></script>
<script type="text/javascript">
    var div = document.querySelector("div");
    // 创建Hammer对象
    var hDiv = new Hammer(document);

    // pinch默认是不可用的，因为它们可能会导致元素被卡住，需要一下设置
    hDiv.get('pinch').set({ enable: true });

    var divW = div.offsetWidth;
    hDiv.on("pinchstart",function(e){
        divW = div.offsetWidth;
    })
    hDiv.on("pinchmove", function (e) {
        var w = divW*e.scale;
        if (w<100) {
            w=100
        }
        div.innerHTML= w;
        div.style.width = w + "px";
        div.style.height = w + "px";
    });
</script>
</html>

3. Press:点击事件

这个事件相当于PC端的Click事件，该不能包含任何的移动，最小按压时间为500毫秒，常用于我们在手机上用的“复制、粘贴”等功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <style type="text/css">
    div{width: 200px;height: 200px;background: red;position: absolute;}
    </style>
</head>
<body>
    <div></div>
</body>
<script type="text/javascript" src="Hammer.js"></script>
<script type="text/javascript">
    var div = document.querySelector("div");
    // 创建Hammer对象
    var hDiv = new Hammer(document);

    // 点击事件
    hDiv.on("press",function (e) {
        console.log(e)
        div.innerHTML = "press";
    })
</script>
</html>

4. Rotate:多手指成圆型旋转事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <style type="text/css">
    div{width: 200px;height: 200px;background: red;position: absolute;}
    </style>
</head>
<body>
    <div>手势放大缩小div</div>
</body>
<script type="text/javascript" src="Hammer.js"></script>
<script type="text/javascript">
    var div = document.querySelector("div");
    // 创建Hammer对象
    var hDiv = new Hammer(document);

    // pinch默认是不可用的，因为它们可能会导致元素被卡住，需要一下设置
    hDiv.get('rotate').set({ enable: true });

    hDiv.on("rotate", function (e) {
        div.innerHTML = e.angle;
        div.style.transform = "rotate("+e.angle+"deg)"
    });



</script>
</html>

5. Swipe:触屏滑动事件

在指定的dom区域内，一个手指快速的在触屏上滑动。即我们平时用到最多的滑动事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <style type="text/css">
    div{width: 200px;height: 200px;background: red;position: absolute;}
    </style>
</head>
<body>
    <div></div>
</body>
<script type="text/javascript" src="Hammer.js"></script>
<script type="text/javascript">
    var div = document.querySelector("div");
    // 创建Hammer对象
    var hDiv = new Hammer(document);

    // 滑动事件
    // hammer默认禁止了上下滑动事件：需要以下设置
    hDiv.get('swipe').set({ direction: Hammer.DIRECTION_ALL });

    hDiv.on("swipeleft swiperight swipeup swipedown",function(e){
        console.log(e.type)
        div.innerHTML = e.type;
    })
</script>
</html>

6.Tap:点击事件

该事件最大点击时间为250毫秒，如果超过250毫秒则按Press事件进行处理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <style type="text/css">
    div{width: 200px;height: 200px;background: red;position: absolute;}
    </style>
</head>
<body>
    <div></div>
</body>
<script type="text/javascript" src="Hammer.js"></script>
<script type="text/javascript">
    var div = document.querySelector("div");
    // 创建Hammer对象
    var hDiv = new Hammer(document);

    // 点击事件
    hDiv.on("tap",function (e) {
        console.log(e)
        div.innerHTML = "tap";
    })
</script>
</html>

ALSNEI

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
hammer.js

hammer.jshammer.js是一个开源的库，他可以的实现在移端开发的大多数事件，如：点击、滑动、拖动、多点触控等事件。hammer.js不需要依赖任何其他的js框架，并且整个框架非常小.1. Pan：拖动事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"
复制链接

扫一扫