touch监听判断手指的上滑,下滑,左滑,右滑,事件监听

判断滑动的方向和距离,来实现一定的效果,比如返回上一页等等

<body>

        <script>
            $(function(){
                    //给body强制定义高度
                    var windowHeight = $(window).height(),
                  $body = $("body");
                  // console.log($(window).height()); //627
                  // console.log($(‘body‘).height()); //0
                  $body.css("height", windowHeight); //重要代码

                $("body").on("touchstart", function(e) {
                //e.preventDefault();//会使所有的触屏都失效,不能用
                startX = e.originalEvent.changedTouches[0].pageX,
                startY = e.originalEvent.changedTouches[0].pageY;
              });
              $("body").on("touchmove", function(e) {
                //e.preventDefault();
                moveEndX = e.originalEvent.changedTouches[0].pageX,
                moveEndY = e.originalEvent.changedTouches[0].pageY,
                X = moveEndX - startX,
                Y = moveEndY - startY;

                if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
                  alert("right");
                }
                else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
                  alert("left");
                }
                else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
                  alert("bottom");
                }
                else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
                  alert("top");
                }
                else{
                  alert("just touch");
                }
              });
            })
        </script>
时间: 2024-10-21 10:27:08

touch监听判断手指的上滑,下滑,左滑,右滑,事件监听的相关文章

IOS开发—视图控制器左边缘右滑pop出栈

IOS视图控制器左边缘右滑pop出栈 IOS7.0之后,苹果优化了一个小功能,就是对于UINavagationController堆栈里的UIViewController,只要轻轻在视图控制器的左边缘右滑一下,该视图控制器就会pop出栈(前提当然是对于非根视图控制器而言).实现方法很简单,一句话搞定: self.navigationController.interactivePopGestureRecognizer.enabled = YES; 事实上对于一个视图控制器而言,该属性的默认值即为Y

WebView使用详解(二)——WebViewClient与常用事件监听

登录|注册     关闭 启舰 当乌龟有了梦想-- 目录视图 摘要视图 订阅 异步赠书:Kotlin领衔10本好书      免费直播:AI时代,机器学习如何入门?      程序员8月书讯      每周荐书:Java Web.Python极客编程(评论送书) WebView使用详解(二)--WebViewClient与常用事件监听 2016-05-28 11:24 20083人阅读 评论(13) 收藏 举报  分类: 5.andriod开发(148)  版权声明:本文为博主原创文章,未经博主

js事件监听机制(事件捕获)总结

在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒泡,没有事件监听的机制,对于事件监听的兼容性问题是最大的难题: 1.直接把事件的方法写在页面结构上 function eventfun(){ //console.log(this); } <input type="button" onclick="eventfun()&qu

从jQuery的缓存到事件监听

很久以前,我还在cnblogs里面逛的时候就提出过一个问题(刚找了半天没找到).不知道大家有没有发现,用jQuery选择器"选择"之后的DOM上会添加jQuery*********属性. <DIV id=d1 jQuery1294122065250="1">abc </DIV> 首先jQuery1294122065250中的"1294122065250"其实是一个时间戳.看看jQuery的源代码. var expando 

关于vue事件监听的一个问题

由于新工作需要用vue,所以最近接触最多的也是vue,因为之前一直在用react,所以对于vue上手还是很快的.我也尽量找一些他们两个的异同点,除了多了一些辅助用的方法以外,最大的不同应该是对于组件间的通信,不仅有props,还有一种事件监听,也是可以通过组件间传递的.我们知道vue的事件监听是一个很方便的设计,代码上一目了然,而且给我们增加了多种修饰符(虽然我都没怎么用过)来简化你的代码.可归根结底,所谓事件监听,通常都是一个需要预处理的过程,即在你初始化你的实例时就需要去为其注册监听.这当然

PIE SDK图层渲染变化事件监听

1. 功能简介 通过PIE SDK加载图层后,会默认的赋值给数据一个渲染.当用户重新给数据赋值Render或改变数据显示效果时,会触发渲染变化事件. 所谓的事件监听是在事件触发时,将执行用户指定的函数或方法,已实现特定的功能. 2. 功能实现说明 2.1 实现思路及原理说明 第一步 栅格图层接口转换至ILayerEvents 第二步 OnRenderChanged进行事件绑定,以达到监听目的. 2.2  核心接口与方法 接口/类 方法 说明 Carto. ILayerEvents OnRende

js如何实现事件监听和解决兼容性

一.为什么需要事件监听? 我们可不可以为同一对象的同一事件绑定多个事件处理程序呢? 通过行内绑定和动态绑定是不可以的,但是可以通过事件监听来实现. window.onload = function() { // 动态绑定 document.getElementById('btn').onclick = function() { alert('first'); } // 动态绑定 document.getElementById('btn').onclick = function() { alert

App开发流程之右滑返回手势功能

iOS7以后,导航控制器,自带了从屏幕左边缘右滑返回的手势功能. 但是,如果自定义了导航栏返回按钮,这项功能就失效了,需要自行实现.又如果需要修改手势触发范围,还是需要自行实现. 广泛应用的一种实现方案是,采用私有变量和Api,完成手势交互和返回功能,自定义手势触发条件和额外功能. 另一种实现方案是,采用UINavigationController的代理方法实现交互和动画: - (nullable id <UIViewControllerInteractiveTransitioning>)na

浅析cocos2d-x 2.x到3.x事件侦听设计变化原因之一

DionysosLai 2015/2/28 对于事件侦听的设计,cocos2d-x从2.x到3.x发生了根本性的变化,一直以来对此,只是单纯的使用考虑如何构建自己的游戏代码,并未对其二者设计孰优孰劣进行探究.只是前段时间在做一个新游戏时,关于2.x的触摸事件发现了一个设计不人性化问题,本想向cocos2dx官网反应,但测试3.x时,并未发现这个问题.对此,本文细述这个问题,分析二者设计的不同,同时希望抛砖引玉. 简单阐述2.x与3.x的事件侦听不同点: 在2.x中,需要注册一个事件侦听. 在3.