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

上图:

上代码:

<!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. [ Skill ] print println printf fprintf sprintf lsprintf

    https://www.cnblogs.com/yeungchie/ 几种 print 函数的差异 print 接收任意的数据类型,并打印到 CIW print( 12345 ) ; 12345 pr ...

  2. php 数组汇总

    PHP 5 Array 函数 函数 描述 array() 创建数组. array_change_key_case() 返回其键均为大写或小写的数组. array_chunk() 把一个数组分割为新的数 ...

  3. mysql 完整备份和恢复

    mysql 完整备份和恢复   一.MySQL完整备份操作 1.直接打包数据库文件夹 创建数据库auth: MariaDB [(none)]> create database auth;Quer ...

  4. 商品模型：SPU、商品、SKU概念模型设计

    商品系统是电商SaaS.新零售SaaS最基础.最核心的系统之一.商品系统几乎需要支撑所有业务系统,商品详情.购物车.订单.履约.结算.售后.库存.供应链等,都需要依赖商品系统的能力.为了保障业务的稳定 ...

  5. 前端—我的第一篇博客 梦开始的地方（面向对象版tab栏）

    这是我的第一篇博客 博客生涯才开始 但是人生已经过去了二十个年头了 才开始弄这个 也没搞得太懂 我原本的想法是想搞个源代码上来 但是看了半天好像就只能传html源代码 那我还有css js的部分呢 我 ...

  6. Linux 环境下安装 Nexus 私服存储库

    镜像下载.域名解析.时间同步请点击阿里云开源镜像站 一.nexus私服存储库简介 Nexus 是一个强大的maven仓库管理器,它极大地简化了本地内部仓库的维护和外部仓库的访问.,还可以用来创建yum ...

  7. ssh-ssl编译安装

    升级前准备 #下载所需依赖包#yum install -y gcc gcc-c++ glibc make autoconf openssl openssl-devel pcre-devel pam-d ...

  8. python发送邮件之宝藏库yagmail

    之前使用email模块+smtplib模块发送邮件,虽然可以实现功能,但过程比较繁琐,今天发现一个宝藏库(yagmail),可以说是炒鸡好用啦!!! 贴上实现代码,大家细品 yagmail安装 pip ...

  9. position 的值absolute、fixed、relative和static的定位原点是什么

    position 的值absolute.fixed.relative和static的定位原点是什么 absolute 成绝对定位的元素,相对于值不为static的第一个父元素进行定位,也可以理解为离自 ...

  10. 如何在 Mac 上强制退出 App

    同时按住三个按键:Option.Command 和 Esc (Escape) 键.或者,从屏幕左上角的苹果菜单  中选取"强制退出".(这类似于在 PC 上按下 Control- ...