js实现touch移动触屏滑动事件

2023年6月11日上午5:06 • JavaScript

首先，在JS中实现touch移动事件需要以下步骤：

1.监听touch事件，获取移动的距离及方向
2.根据移动的距离及方向判断滑动操作：是垂直滑动还是水平滑动
3.根据滑动的距离改变页面元素的位置
4.结束滑动后执行相应的操作，比如改变元素的样式或者执行相关动画

下面是JS实现touch移动事件的完整示例：

<!DOCTYPE html>
<html>
<head>
    <title>JS touch事件</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
    #box{
        width: 100px;
        height: 100px;
        background-color: #f00;
        position: absolute;
        left: 0;
        top: 0;
        transition: all 0.3s ease-out;
    }
    </style>
</head>
<body>
    <div id="box"></div>
    <script type="text/javascript">
    var start_x = 0, start_y = 0;
    var end_x = 0, end_y = 0;
    var diff_x = 0, diff_y = 0;
    var box = document.getElementById("box");
    // 监听touchstart事件
    box.addEventListener("touchstart", function(event){
        start_x = event.touches[0].pageX;
        start_y = event.touches[0].pageY;
    });
    // 监听touchmove事件
    box.addEventListener("touchmove", function(event){
        event.preventDefault();
        end_x = event.touches[0].pageX;
        end_y = event.touches[0].pageY;
        diff_x = end_x - start_x;
        diff_y = end_y - start_y;
        // 判断滑动方向
        if(Math.abs(diff_x) > Math.abs(diff_y)){
            // 水平滑动
            box.style.left = parseFloat(box.style.left) + diff_x + "px";
        } else if(Math.abs(diff_x) < Math.abs(diff_y)){
            // 垂直滑动
            box.style.top = parseFloat(box.style.top) + diff_y + "px";
        }
        start_x = end_x;
        start_y = end_y;
    });
    // 监听touchend事件
    box.addEventListener("touchend", function(event){
        event.preventDefault();
        if(parseFloat(box.style.left) < 0){
            box.style.left = "0px";
        } else if(parseFloat(box.style.top) < 0){
            box.style.top = "0px";
        } else if(parseFloat(box.style.left) > window.innerWidth - box.clientWidth){
            box.style.left = window.innerWidth - box.clientWidth + "px";
        } else if(parseFloat(box.style.top) > window.innerHeight - box.clientHeight){
            box.style.top = window.innerHeight - box.clientHeight + "px";
        }
    });
    </script>
</body>
</html>

在上述代码中，我们通过addEventListener函数监听box元素的touchstart、touchmove、touchend事件，根据移动的距离及方向判断滑动操作，并根据滑动的距离改变页面元素的位置。当滑动结束后，我们还根据移动的距离判断是否需要执行相应的操作，比如将元素移动到正确的位置上。

下面是另一个示例代码，这个代码实现了一个简单的拖放功能。代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>JS拖放功能</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
    #box{
        width: 100px;
        height: 100px;
        background-color: #f00;
        position: absolute;
        left: 0;
        top: 0;
    }
    </style>
</head>
<body>
    <div id="box"></div>
    <script type="text/javascript">
    var start_x = 0, start_y = 0;
    var diff_x = 0, diff_y = 0;
    var box = document.getElementById("box");
    box.addEventListener("touchstart", function(event){
        event.preventDefault();
        start_x = event.touches[0].pageX - parseFloat(box.style.left);
        start_y = event.touches[0].pageY - parseFloat(box.style.top);
    });
    box.addEventListener("touchmove", function(event){
        event.preventDefault();
        box.style.left = event.touches[0].pageX - start_x + "px";
        box.style.top = event.touches[0].pageY - start_y + "px";
    });
    box.addEventListener("touchend", function(event){
        event.preventDefault();
    });
    </script>
</body>
</html>

在这个示例代码中，我们通过监听box元素的touchstart、touchmove、touchend事件，计算出触摸点相对于box左上角的坐标，然后根据移动的距离改变box元素的位置。当拖动结束后，我们并没有执行任何操作，因此box元素会停留在最后的位置上。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现touch移动触屏滑动事件 - Python技术站