移动端事件封装封装单击事件

最新推荐文章于 2023-02-17 12:04:07 发布

stephen Curry_

最新推荐文章于 2023-02-17 12:04:07 发布

阅读量131

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_65544665/article/details/127342985

版权

为什么要封装单击事件？

比如：

我们现在给同一个元素绑定了点击和移动两个事件

因为移动端的屏幕非常小，点击完以后，手在抬起来的时候，很容易造成一点的移动偏差

此时就很容易触发移动事件

我们需要进行一个判断，比如手在抬起来的时候，位置偏差范围多少的情况下视为单击离开

偏差多少的范围外，视为移动事件

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>封装单击事件</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .div1,.div2{
            height: 200px;
            background-color: skyblue;
            margin-bottom: 30px;
        }
    </style>
    
</head>

<body>
    <div class="div1"></div>
    <div class="div2"></div>

</body>

<script>
    var div1 = document.getElementsByClassName('div1')[0];
    var div2 = document.getElementsByClassName('div2')[0];

    // 把点击事件封装成对象的方法
    var touchEvent = {
        
        tab:function(el){
            var end_x,end_y,start_x,start_y;
            el.ontouchstart = function(e){
                e =e||window.event;
                // 获取按下动作的x值和y值
                start_x = e.changedTouches[0].clientX;
                start_y = e.changedTouches[0].clientY;
            }

            el.ontouchend = function(e){
                e = e||window.event;
                //获取抬起动作的x值和y值
                end_x = e.changedTouches[0].clientX;
                end_y = e.changedTouches[0].clientY;

                if(Math.abs(end_x-start_x)<10 && Math.abs(end_y-start_y)<10){
                    alert('您调用了点击事件')
                }else{
                    alert('您调用了移动事件');
                }
            }
        }
    }

    touchEvent.tab(div1);
    touchEvent.tab(div2);
</script>

</html>

stephen Curry_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端事件封装封装单击事件

移动端事件封装封装单击事件
复制链接

扫一扫

移动端事件封装 封装单击事件

“相关推荐”对你有帮助么？

移动端事件封装封装单击事件