客户B/S体系，移动端touch事件（touchstart，touchmove，touchend），定时器区分点击与长按！

最新推荐文章于 2022-07-14 19:40:13 发布

Mr_ccup

最新推荐文章于 2022-07-14 19:40:13 发布

阅读量462

点赞数

分类专栏：前端代码移动端

本文链接：https://blog.csdn.net/Mr_ccup/article/details/94717544

版权

前端代码同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

移动端

3 篇文章 0 订阅

订阅专栏

首先是HTML；
这里下载了一个封装touch事件的相关插件–> touch.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    //引用jq，我是直用的相关框架里面的jq
    <script src="lib/jquery/1.9.1/jquery.js"></script>
    //导入touch.js
    <script src="js/touchjs/touch.js"></script>
</head>
<body>
	<div id="name01"> 这是一个box01</div>
</body>
</html>

touch.js
核心方法：
touch.on(element,types,callback);
参数说明，
element element或string 元素对象、选择器
types string 事件的类型（多为手势事件），可接受多个事件以空格分开；支持原生事件的透传
callback function 事件处理函数, 移除函数与绑定函数必须为同一引用;


$(document).ready(function () {
		//这里采用了定时器的方式才判定用户的操作到底是点击还是长按
        var timeOutEvent;
        touch.on("#name01","touchstart",function(e) {
            // 长按事件触发
            timeOutEvent = setTimeout(function() {
                timeOutEvent = 0;
                alert('你长按了');
            }, 1000);
        });
        touch.on("#name01","touchmove",function() {
            clearTimeout(timeOutEvent);
            timeOutEvent = 0;
        });
        touch.on("#name01","touchend",function() {
            clearTimeout(timeOutEvent);
            if (timeOutEvent != 0) {
                console.log('你点击了');
            }
            return false;
        });
    });

基本上就射这么简单，
更多关于touch.js 的相关信息，可以看touch.js文档——

Mr_ccup

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
客户B/S体系，移动端touch事件（touchstart，touchmove，touchend），定时器区分点击与长按！

首先是HTML；这里下载了一个封装touch事件的相关插件–> touch.js<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> //引用jq，我是直用的相关框架里面的jq...
复制链接

扫一扫