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

上图:

上代码:

<!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. MATLAB菜鸟入门笔记【作图章】

    1.函数标签[legend]         http://blog.csdn.net/wangcj625/article/details/6287735/

  2. centos7下mysql安装

    centos7只包含了mariadb的安装源 我们需要到官方下载社区版:https://dev.mysql.com/downloads/ 下载安装包并上传到服务器 安装出现错误 这个是系统自带的Mar ...

  3. LGP5664题解

    厉害. 对于每一列选的数最多占一半,我们得设计一个三维 DP.然而状态刚好够,但是转移明显炸了(而且似乎还需要多项式?) 考虑正难则反,DP 不合法的方案数.总方案数很好算. 发现不合法的方案数只有某 ...

  4. Java 8 + 10 = Java 18

    明天Java 18将正式发布, 虽然它不是长期支持 (LTS) 版本,但它却实现了九个 JEP(在Java 18列出).有哪些特性值得关注呢?今天胖哥为你提前解读.再看.点赞.转发.关注来一波吧. J ...

  5. 高并发之 API 接口，分布式，防刷限流，如何做？

    在开发分布式高并发系统时有三把利器用来保护系统:缓存.降级.限流 缓存 缓存的目的是提升系统访问速度和增大系统处理容量 降级 降级是当服务出现问题或者影响到核心流程时,需要暂时屏蔽掉,待高峰或者问题解 ...

  6. mysql学习笔记-底层原理详解

    前言 我相信每一个程序员都避免不了和数据库打交道,其中Mysql以其轻量.开源成为当下最流行的关系型数据库.Mysql5.0以前以MyISAM作为默认存储引擎,在5.5版本以后,以InnoDB作为默认 ...

  7. 关于API和SDK的个人理解及两者区别

    关于API和SDK的个人理解及两者区别 最近接到公司的一项任务,调用第三方库的一些东西.因此记录一下在使用第三方的功能模块时常常提及到的两个名词--API和SDK. 1.SDK是什么?SDK:概念:软 ...

  8. python 命令行参数学习（二）

    照着例子看看打打,码了就会.写了个命令行参数调用进行运算的脚本. 参考文章链接:http://www.jianshu.com/p/a50aead61319 #-*-coding:utf-8-*- __ ...

  9. bzoj4596/luoguP4336 [SHOI2016]黑暗前的幻想乡(矩阵树定理，容斥)

    bzoj4596/luoguP4336 [SHOI2016]黑暗前的幻想乡(矩阵树定理,容斥) bzoj Luogu 题解时间 看一看数据范围,求生成树个数毫无疑问直接上矩阵树定理. 但是要求每条边都 ...

  10. Elman network with additional notes

    // Author: John McCullock // Date: 10-15-05 // Description: Elman Network Example 1. //http://www.mn ...