js,JavaScript 监听 判断 移动端 滑动事件
<script>
var startx, starty;
//获得角度
function getAngle(angx, angy) {
return Math.atan2(angy, angx) * 180 / Math.PI;
}; //根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动
function getDirection(startx, starty, endx, endy) {
var angx = endx - startx;
var angy = endy - starty;
var result = 0; //如果滑动距离太短
if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
return result;
} var angle = getAngle(angx, angy);
if (angle >= -135 && angle <= -45) {
result = 1;
} else if (angle > 45 && angle < 135) {
result = 2;
} else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
result = 3;
} else if (angle >= -45 && angle <= 45) {
result = 4;
} return result;
}
//手指接触屏幕
document.addEventListener("touchstart", function(e) {
startx = e.touches[0].pageX;
starty = e.touches[0].pageY;
}, false);
//手指离开屏幕
document.addEventListener("touchend", function(e) {
var endx, endy;
endx = e.changedTouches[0].pageX;
endy = e.changedTouches[0].pageY;
var direction = getDirection(startx, starty, endx, endy);
switch (direction) {
case 0:
alert("未滑动!");
break;
case 1:
alert("向上!")
break;
case 2:
alert("向下!")
break;
case 3:
alert("向左!")
break;
case 4:
alert("向右!")
break;
default:
}
}, false);
</script>
js,JavaScript 监听 判断 移动端 滑动事件的更多相关文章
- js 实时监听input中值变化
注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...
- js滚动监听
下边代码,是监听滚动条只要移动,下方的返回顶部的div显示与隐藏的代码 ? 1 2 3 4 5 6 7 8 window.onscroll = function () { var t = docum ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- Android 手势水平监听判断
package com.zihao.ui; import com.zihao.R; import android.os.Bundle; import android.app.Activity; imp ...
- js 监听整个页面的回车事件
JS监听整个页面的回车事件 <script type="text/javascript"> document.onkeydown=keyDownSearch; ...
- js监听用户的键盘敲击事件,兼容各大主流浏览器
js监听用户的键盘敲击事件,兼容各大主流浏览器 <script type="text/javascript"> document.onkeydown = functio ...
- JavaScript监听手机物理返回键的两种解决方法
JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventList ...
- Vue.js:监听属性
ylbtech-Vue.js:监听属性 1.返回顶部 1. Vue.js 监听属性 本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例 & ...
- JavaScript监听回车事件
记录一下,兼容性也考虑到了,原文地址:JavaScript 监听回车事件 JS监听某个输入框 //回车事件绑定 $('#search_input').bind('keyup', function(ev ...
随机推荐
- 使用SqlBulkCopy批量插入数据,测试20万条用时5秒
using System;using System.Collections.Generic;using System.Linq;using System.Text; using System.Data ...
- cpio解压initramfs.img
一.解压initramfs.img # mkdir test # cp /boot/initramfs.img /test # cd test # file initramfs.img initram ...
- list转map
参考https://cloud.tencent.com/developer/article/1033706 import java.lang.reflect.Field; import java.ut ...
- Python使用SMTP发送邮件(163,yeah等网易邮箱已测试可以)
#! /usr/bin/env python# -*- coding: UTF-8 -*-import smtplibfrom email.mime.text import MIMETextmailt ...
- springboot 日志2
SpringBoot关于日志的官方文档 1.简述 SpringBoot官方文档关于日志的整体说明 本博客基于SpringBoot_1.3.6大家请先简单看下这篇英文的官方文档,文中有说 Sprin ...
- TortoiseSVN设置Beyond Compare为版本比较、差异合并工具
打开乌龟的setting==>Diff Viewer 比较"D:\develop\Beyond Compare 4\BCompare.exe" %base %mine /ti ...
- vs2015未能计算子级
数据源 属性里边值 设置出现问题
- Linux_(4)Shell编程(下)
五.shell流程控制1.一重分支if 语句语法格式:if condition then command1 fi末尾的fi就是if倒过来. 写成一行: if condition; then comma ...
- How to use external classes and PHP files in Laravel Controller?
By: Povilas Korop Laravel is an MVC framework with its own folder structure, but sometimes we want t ...
- 论坛:Error:No result defined for action cn.itcast.oa.view.action.TopicAction and result
使用了<s:hidden name="forumId" value="#forum.id"/> 可以改为: <s:hidden name=&q ...