touch 事件用法（只能使用二级dom绑定，例如（addEventlinstener绑定），使用ontouch...是不管用的

最新推荐文章于 2024-03-30 09:29:19 发布

ITzhongzi

最新推荐文章于 2024-03-30 09:29:19 发布

阅读量1.7k

点赞数 1

分类专栏：前端学习笔记文章标签： touch

本文链接：https://blog.csdn.net/ITzhongzi/article/details/73991978

版权

前端学习笔记专栏收录该内容

306 篇文章 7 订阅

订阅专栏

touch 事件只会在手机端有用，常用语手机端。

具体用法如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=">
    <title>Title</title>
</head>
<body>
<input type="button" value="jquery测试 touch事件">

<button>原生js测试</button>

<script src="../node_modules/jquery/dist/jquery.js"></script>
<script>
    

    //触摸开始 调用
    $(document).on('touchstart','input',function () {
        console.log('touch start');
    });
    //触摸过程中 调用
    $(document).on('touchmove','input',function () {
        console.log('touch move');
    });
    //触摸结束 调用
    $(document).on('touchend','input',function () {
        console.log('touch end');
    })


    /* 这种方法是不管用的。  touch一类的方法必须用  二级 dom 绑定，  例如：　addeventlinstener

    var btn = document.getElementsByTagName('button')[0];

    btn.ontouchstart = function () {
        console.log('js start');
    }


    btn.ontouchmove = function () {
        console.log('js move');
    }

    btn.ontouchend = function () {
        console.log('js end');
    }*/

    //原生js 中的 touch 事件
    var btn = document.getElementsByTagName('button')[0];
    //触摸开始 调用
    btn.addEventListener('touchstart',function () {
        console.log('js start');
    })
    //触摸过程中调用
    btn.addEventListener('touchmove',function () {
        console.log('js move');
    })
    //触摸结束调用
    btn.addEventListener('touchend',function () {
        console.log('js end');
    })


</script>
</body>
</html>

ITzhongzi

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
touch 事件用法（只能使用二级dom绑定，例如（addEventlinstener绑定），使用ontouch...是不管用的

touch 事件只会在手机端有用，常用语手机端。具体用法如下所示：html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,
复制链接

扫一扫