网上的代码杂七杂八,  我搞个简单明了的!!  你们直接复制粘贴,  手机上 电脑上 可以直接测试!!!

上图:

上代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport"

        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

    <title>记录用户行为</title>

    <style>

        * {

            padding: 0;

            margin: 0;

            color: #ccc;

        }

    </style>

</head>

<body>

    <div id="app">

        <h1 v-for="item in 40">滑动我试试看{{item}}</h1>

    </div>

    <!-- 思路: 区分 点击和滑动, 关键在于 touchmove 事件; 只有滑动,touchmove中才能获取到 坐标值;

             然后通过 touchend中 判断 touchmove是否获取到值,  从而来判断是否是滑动,

             重点:touchend  后 把  touchmove获取到 坐标值  去除; -->

</body>

</html>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

    new Vue({

        el: '#app',

        data: {

            x: '',//touchStart记录的坐标

            y: '',//touchStart记录的坐标

            touchMove_y: ''//touchMove_y != '' 是滑动     touchMove_y == '' 是点击

        },

        methods: {

            toHot() {

                location.href = './2222.html'

            },

            touchSatrtFunc(evt) {

                try {

                    var touch = evt.touches[0]; //获取第一个触点

                    this.x = Number(touch.pageX); //页面触点X坐标

                    this.y = Number(touch.pageY); //页面触点Y坐标

                } catch (e) {

                    console.log('touchSatrtFunc：' + e.message);

                }

            },

            touchMoveFunc(evt) {

                try {

                    var touch = evt.touches[0];

                    var x = Number(touch.pageX);

                    var y = Number(touch.pageY);

                    console.log(x, y)

                    // 判断是否滑动还是点击,  this.touchMove_y == ''是点击      this.touchMove_y != '' 是滑动

                    this.touchMove_y = y

                } catch (e) {

                    alert('touchMoveFunc：' + e.message);

                }

            },

            touchEndFunc(evt) {

                try {

                    // 判断是否滑动还是点击,  this.touchMove_y == ''是点击      this.touchMove_y != '' 是滑动

                    console.log(this.touchMove_y == '')

                    if (this.touchMove_y == '') {

                        alert('这是点击')

                    } else {

                        alert('这是滑动', this.y, this.x)

                        this.touchMove_y = ''  //记录数据后  修改touchMove_y = ''   重点!!!!!!

                    }

                } catch (e) {

                    console.log('touchSatrtFunc：' + e.message);

                }

            },

            bindEvent() {

                document.addEventListener('touchstart', this.touchSatrtFunc, false);

                document.addEventListener('touchmove', this.touchMoveFunc, false);

                document.addEventListener('touchend', this.touchEndFunc, false);

            }

        },

        mounted() {

            this.bindEvent()

        }

    })

</script>

js手机端判断滑动还是点击的更多相关文章

  1. touch.js 手机端的操作手势

    使用原生的touchstart总是单击.长按有冒泡冲突事件,发现百度在几年开源的touch.js库,放在现在来解决手机端的操作手势,仍然很好用.

  2. js 手机端触发事事件、javascript手机端/移动端触发事件

    处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种Touch事件: touchstart: // 手指放到屏幕上的时候触发 touchmove: // 手指在屏幕上移动的时候触发 ...

  3. 手机端左右滑动,不用写js(只有页面切换到移动端可以看)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. 使用JS进行pc端、手机端判断

     <script type="text/javascript">            (function(){                var ua = nav ...

  5. [js开源组件开发]js手机端浮层控件，并有多种弹出小提示，兼容pc端浏览器

    js dialog组件,包含alert和confirm的实现 本组件所有的资源均在github上可以查看源代码 GitHub 本dialog的组件的例子请在这里查看 demo dialog js di ...

  6. JS 手机端多张图片上传

    代码如下 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="u ...

  7. touch.js——手机端的操作手势

    TOUCH.JS手势操作,例如一指拖动.两指旋 基本事件: touchstart   //手指刚接触屏幕时触发 touchmove    //手指在屏幕上移动时触发 touchend     //手指 ...

  8. 去除手机端触摸滑动事件ontouchmove

    window.ontouchmove=function(e){ e.preventDefault && e.preventDefault(); e.returnValue=false; ...

  9. 【手机端判断】PC_to_M自写

    var current_url = window.location.href; var replace_url = [ ['笔试简章','http://beijing.ysedu.com/zt/bjt ...

随机推荐

  1. CLR的GC工作模式介绍(Workstation和Server)

    CLR的核心功能之一就是垃圾回收(garbage collection),关于GC的基本概念本文不在赘述.这里主要针对GC的两种工作模式展开讨论和研究. Workstaction模式介绍 该模式设计的 ...

  2. docker基础命令和操作

    前言 之前在部署个人网站的时候,需要打包maven,在生产环境,需要使用到docker去做服务器和端口的守护. 于是在查阅了相关资料,学习了docker一些基本命令行操作,包括对镜像的查看,修改和添加 ...

  3. MySQL主从复制介绍：使用场景、原理和实践

    MySQL主从复制介绍:使用场景.原理和实践 MySQL数据库的主从复制方案,和使用scp/rsync等命令进行的文件级别复制类似,都是数据的远程传输,只不过MySQL的主从复制是其自带的功能,无需借 ...

  4. pd.cut和pd.qcut（）之间的区别

  5. vue 通信：父子通信、兄弟通信、跨多层通信、vuex状态管理

    之前简单做了一次vue通信方法的培训,在此记录一下培训的内容. 关于vue通信,大家最先想到的方法应该是props.ref.$emit.$parent,还有vuex,因为这也是我在项目中最常用到的方法 ...

  6. ArcMap操作随记（12）

    1.[取色器]工具 [自定义]|[自定义模式]|[命令] 2.批量修改符号 [符号系统]→右键,[所有符号的属性] 3.将地图元素转换为图形 转换工具 4.好看的地图边框 [布局视图]→数据框上右键→ ...

  7. 《前端运维》一、Linux基础--06Shell流程控制

    这章我们来学习下流程控制,简单来说就是逻辑判断和循环的写法.并不复杂,我们来简单地看下. 1.if语句 shell的if语句有两种写法,一种是shell脚本式的,一种是命令式的. if conditi ...

  8. Java基础-成员变量与局部变量

    Java基础-成员变量与局部变量 1.什么是成员变量与局部变量? public class Student {   String name;   int high;   public void stu ...

  9. python中字符串与列表之间的相互转换

    1.字符串>列表:split() a = 'my first python' b = a.split(" ") print(b)输出: 2.列表>字符串:join() ...

  10. python 命令行参数学习（一）

    用了这么久,还没怎么学习python的命令行参数,是在惭愧. 参考文章地址:http://www.cnblogs.com/jianboqi/archive/2013/01/10/2854726.htm ...