js判断手机的左右滑动
js代码
$(function() {
function judge() {
var startx;//让startx在touch事件函数里是全局性变量。
var endx;
var el = document.getElementById('io');//触摸区域。
function cons() { //独立封装这个事件可以保证执行顺序,从而能够访问得到应该访问的数据。
if (startx > endx) { //判断左右移动程序
alert("left");
} else {
alert("right");
}
} el.addEventListener('touchstart', function (e) {
var touch = e.changedTouches;
startx = touch[].clientX;
starty = touch[].clientY;
});
el.addEventListener('touchend', function (e) {
var touch = e.changedTouches;
endx = touch[].clientX;
endy = touch[].clientY;
cons(); //startx endx 的数据收集应该放在touchend事件后执行,而不是放在touchstart事件里执行,这样才能访问到touchstart和touchend这2个事件产生的startx和endx数据。另外startx和endx在_touch事件函数里是全局性的,所以在此函数中都可以访问得到,所以只需要注意事件执行的先后顺序即可。
});
} judge();
})
html随便写就可以 记得id要对应
<body>
<div style="width: 100%;height: 3000px;background: #08c;" id="io"> </div>
</body>
js判断手机的左右滑动的更多相关文章
- js判断手机 横屏模式
js判断手机 横屏模式 方法名称:orientation 实例: if(window.orientation!=0){ var obj=document.getElementById('orienta ...
- js判断手机浏览器操作系统和微信浏览器的方法
做手机端的前端开发,少不了对手机平台的判断.如,对于app下载,就要判断在Android平台下就显示Android下载提示:在iOS平台下就显示iOS下载提示. 今天就为大家介绍一下用js判断手机客户 ...
- js判断手机的横竖屏调整样式
在移动端,我们经常遇到横竖屏的问题,所以我们改如何判断或针对横竖屏来写代码呢.首先需要在head中加入如下代码: <meta name="viewport" content= ...
- js判断手机浏览器是横屏or竖屏
移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 从而根据实际需求而执行相应的程序.通过添加监听事件onorientationc ...
- js判断手机系统和微信
//判断手机浏览器 var ua = navigator.userAgent; var ipad = ua.match(/(iPad).*OS\s([\d_]+)/), isIphone = !ipa ...
- js判断手机是否安装了某一款app,有则打开,没有去下载
function openApp(){ if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { var loadDateTime = new ...
- JS判断手机横竖屏
在移动端开发时,有时候需要判断手机的横竖屏,那么就需要用到window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 屏幕方向对应的window.orientat ...
- 【转】js判断手机访问网页
原理:原理有两个,第一:通过游览器(browser)判断是否是手机:第二:通过访问终端判断是否是手机(userAgent):但是通常考虑到兼容性,需要这两种原理同时使用:具体的实现如下: JS实现: ...
- JS判断手机访问跳转到手机站
这里提供了六种让手机端访问网站跳转到手机端的方法: 第一种: <script> if(navigator.platform.indexOf('Win32')!=-1){ //pc //wi ...
随机推荐
- c++运算符重载和虚函数
运算符重载与虚函数 单目运算符 接下来都以AClass作为一个类例子介绍 AClass{ int var } 区分后置++与前置++ AClass operator ++ () ++前置 一般设计为返 ...
- aop配置问题引发的报错
今天在使用注解配置aop时出现了几次的错误 INFO - Refreshing org.springframework.context.support.ClassPathXmlApplicationC ...
- 10分钟了解 react 引入的 Hooks
"大家好,我是谷阿莫,今天要将的是一个...",哈哈哈,看到这个题我就想到这个开头.最近react 官方在 2018 ReactConf 大会上宣布 React v16.7.0-a ...
- 网络编程-osi七层
一.操作系统基础 操作系统:(Operating System,简称OS)是管理和控制计算机硬件与软件资源的计算机程序,是直接运行在“裸机”上的最基本的系统软件,任何其他软件都必须在操作系统的支持下才 ...
- Android Studio 安装与使用ADB wifi 无线调试
首先,安装ADB WIFI File->Settings->Plugins 其次,用USB连接手机与电脑(并开启手机的调试模式) 任务栏若无提示,即可拔下USB线,开始无线调试 任务栏若是 ...
- 引用 Reference
在Java中,判断一个对象是否 "存活" ,都和引用有关,当一个对象没有任何的引用指向它,我们可以认为这个对象可以被GC了. 引用如何定义?Object obj = new Obj ...
- CTU Open Contest 2017
这场题很水.水题我就懒得贴了. B - Pond Cascade 优先队列维护这个水池需要多少时间 或者 直接扫一遍. #include <cstdio> #include <cst ...
- 笔记-爬虫-robots.txt
笔记-爬虫-robots.txt 1. robots.txt文件简介 1.1. 是什么 robots.txt是用来告诉搜索引擎网站上哪些内容可以被访问.哪些不能被访问.当搜索引擎访问一 ...
- 最近使用Nginx的一点新得
1.基本的负载配置 Nginx最简单的配置模块如下 upstream name{ server ip:port; server ip:port; } server { listen 80; serve ...
- Android开发——用户在屏幕上的手势识别
个定点决定.四个属性分别为left(1),top(2),right(3),bottom(4). 数字为图上标出的距离.显然这四个属性是相对于父容器来定的,均可以通过get()方法获取. 因此很容易得出 ...