移动端touchstart、touchend触摸事件的简单使用

最新推荐文章于 2024-01-02 16:01:39 发布

xuxinwen32

最新推荐文章于 2024-01-02 16:01:39 发布

阅读量3.7k

点赞数

分类专栏：前端文章标签：移动端触摸事件的简单使用

本文链接：https://blog.csdn.net/xuxinwen32/article/details/78773183

版权

前端专栏收录该内容

40 篇文章 1 订阅

订阅专栏

工作当中要在一张移动端页面上显示倒计时，倒计时过程中不能点击，当页面显示“跳转”文字以后可以进行点击；因为是移动端页面，
移动端是触摸事件和PC端的鼠标事件是不同的，所以用了H5的属性touchstart/touchend做了一个简单的小实例；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<div class="Jump">
    5
</div>

<script>
    //setJump获取setInterval句柄
    setJump = setInterval(function(){
        var Jump = $(".Jump").text();
        Jump--;
        $(".Jump").text(Jump);
        console.log(Jump);
        if(!Jump){
            //清除setInterval
            clearInterval(setJump);
            $(".Jump").text('跳过');
        }
    }, 1000);


    $(".Jump").on('touchstart', function(){
        var Jump = $(".Jump").text();
        if(Jump == '跳过'){
            console.log('touchstart');
        }
        event.stopPropagation();
        return false;
    });
$(".Jump").on('touchend', function(){
    var Jump = $(".Jump").text();
    if(Jump == '跳过'){
        console.log('touchend');
    }
    event.stopPropagation();
    return false;
});
</script>

</body>
</html>