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

上图:

上代码:

<!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. 学习linux(centos7)记录的笔记

    此随笔用于记录学习<linux鸟哥的私房菜>过程中1.遇到的问题及解决的过程 2.有必要记录的重要内容 3.对应书上操作的记录 开始于2021年6月18号 一个磁盘的分区通过格式化后成为一 ...

  2. 微信小程序实现图表展示

    开发可参考以下链接 点击有道云链接 小程序柱状图展示 [单元目标] 掌握小程序柱状图展示 [教学内容] 1.1 掌握组件导入 在miniprogram下的utils文件夹(若没有就新建一个)下,新建w ...

  3. 什么是SaaS？

    SaaS的定义 SaaS,是Software-as-a-Service的缩写名称,意思为软件即服务,即通过网络提供软件服务. SaaS平台供应商将应用软件统一部署在自己的服务器上,客户可以根据工作实际 ...

  4. git 回滚方式

    git push 命用于从将本地的分支版本上传到远程并合并. 命令格式如下: git push <远程主机名> <本地分支名>:<远程分支名> 如果本地分支名与远程 ...

  5. springcloud报错-Ribbon整合Eureka，出现 No instances available for XXX 异常

    RestTemplate注入有问题 新版的需要这样注入: @Bean @LoadBalanced RestOperations restTemplate(RestTemplateBuilder bui ...

  6. 旅游清单一步搭建，Angular助力你的踏春计划

    春天的脚步愈发临近,相信很多小伙伴已经开始规划自己的踏春计划了,无论是欣赏名胜古迹,还是走访风土人文,你都需要提前准备一份旅游清单!有了这款Angular旅游计划应用,从地点到预算,它都能帮助你创建自 ...

  7. 10ISE14.7和modelsim10.5关联编译库

    今天准备在ISE14.7中调用PLL的IP核,搞一下时钟的分频和倍频.可在我做好pll的IP核后,我直接用ise生成了一个仿真文件,只需要修改下例化模块名和加一个时钟就行勒. 问题:但怎么在ISE14 ...

  8. 你如何理解 Spring Boot 中的 Starters？

    Starters可以理解为启动器,它包含了一系列可以集成到应用里面的依赖包,你可以一站式集成 Spring 及其他技术,而不需要到处找示例代码和依赖包.如你想使用 Spring JPA 访问数据库,只 ...

  9. 面试问题之C++语言：volatile关键字的作用

    volatile的作用 volatile关键字是防止在共享的空间发生读取的错误.只保证其可见性,不保证原子性:使用volatile指每次从内存中读取数据,而不是从编译器优化后的缓存中读取数据,简单来讲 ...

  10. 解释Spring支持的几种bean的作用域？

    Spring框架支持以下五种bean的作用域: singleton :bean在每个Spring ioc 容器中只有一个实例. prototype:一个bean的定义可以有多个实例. request: ...