html5滑动事件代码
$(".header").on("touchstart", function(e) {
// 判断默认行为是否可以被禁用
if (e.cancelable) {
// 判断默认行为是否已经被禁用
if (!e.defaultPrevented) {
e.preventDefault();
}
}
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});
$(".header").on("touchend", function(e) {
// 判断默认行为是否可以被禁用
if (e.cancelable) {
// 判断默认行为是否已经被禁用
if (!e.defaultPrevented) {
e.preventDefault();
}
}
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
//左滑
if ( X > 0 ) {
if(X>150){
console.log('左滑',X);
}
}
//右滑
else if ( X < 0 ) {
if(X<-150){
console.log('右滑',X);
}
}
//下滑
else if ( Y > 0) {
console.log('下滑', Y);
}
//上滑
else if ( Y < 0 ) {
console.log('上滑', Y);
}
//单击
else{
console.log('单击');
}
});
html5滑动事件代码的更多相关文章
- 移动设备、手机浏览器Javascript滑动事件代码
以下经过本人测试成功. 测试平台:三星S5830I 操作系统:Android 2.3.6 浏览器:UC浏览器 HTML标准:HTML5 测试了三个事件:touchstart.touchmove 和 t ...
- html5 touch事件实现触屏页面上下滑动(二)
五一小长假哪都没去,睡了三天,今天晕晕沉沉的投入工作了,但还是做出了一点点效果 上周用html5的touch事件把简单的滑动做出来了,实现了持续页面上下滑动的效果,参考之前 的文章及代码html5 t ...
- HTML5滑动(swipe)事件
移动H5开发中经常用到滑动效果(页面上移.下移.向左滑动.向右滑动等),浏览器并没有内置swipe事件,可以通过touch事件(touchstart.touchmove和touchend)模拟swip ...
- 移动端上下滑动事件之--坑爹的touch.js
下面的方法,不知道是操作方法不对还是啥. 在 zepto.js 里面加那一段代码不起作用 百度的 touch.js 是可以用的,但是使用方式 和 zepto有点不一样. 解决方案:参照这个链接地址 ...
- 移动端上下滑动事件之--坑爹的touch.js
原文 http://blog.csdn.net/minidrupal/article/details/39611605 移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和htm ...
- webview滑动事件 与内部html左右滑动事件冲突问题的解决办法
最近在做个混合app , 用html做页面,然后通过webview嵌套在activity中,效果是这样: 开始还是比较顺利,增加了菜单退出按钮,返回键页面回退功能,页面加载显示加载图标(在app端实现 ...
- 关于dom节点绑定滑动事件导致浏览器上下滑动失效解决方案--黄丕巧
1.移动端开发往往需要添加一下自定义的左右滑动事件,但是添加了左右滑动事件之后就要阻止浏览器大默认事件,否则dom节点的滑动事件和浏览器本身的滑动会出现冲突,导致滑动的时候会出现消失瞬间再出现的效果 ...
- android ViewPager滑动事件讲解
首先ViewPager在处理滑动事件的时候要用到OnPageChangeListener OnPageChangeListener这个接口需要实现三个方法:(onPageScrollStateChan ...
- Android onTouch、OnLongClick、onClick和ScrollView滑动事件冲突
为了实现近期录制的长按,松开手指,结束录制功能.在项目,难道你去走一走会头晕,书写demo为了下一个梳理. 顺便研究android事件调用机制. 先上效果界面: 布局: <RelativeLay ...
随机推荐
- ORM的概念
- vfile.hpp
//vov #ifndef VFILE_HPP #define VFILE_HPP #include <cstdio> #include <unistd.h> #include ...
- 杂记:防火墙、企业微信登陆、RestFrameWork
192.168.0.250重启后查看端口正常,外部ping得通,但是访问192.168.0.250进不了Nginx欢迎界面 netstat -tlunp 关闭了防火墙就行了,原来80端口都要防火墙. ...
- redis 持久化文章分析的很到位
https://baijiahao.baidu.com/s?id=1611955931705092609&wfr=spider&for=pc
- D3比例尺
D3中有个重要的概念就是比例尺.比例尺就是把一组输入域映射到输出域的函数.映射就是两个数据集之间元素相互对应的关系.比如输入是1,输出是100,输入是5,输出是10000,那么这其中的映射关系就是你所 ...
- angular学习笔记(3)
一.angular的核心 1.组件 2.指令 3.服务 4.依赖注入
- CQRS粗浅理解
CQRS(命令查询责任分离)是一种奇特的模式,表示解耦系统的输入和输出. 通常情况下,输入端将数据写到数据库,输出端从数据库查询.与读写锁的场景类似,写的过程中不能读.正常情况下没有问题,但是在大规模 ...
- maven加载springboot project
maven加载springboot project 1● 下载项目 2● 构建project mvn install mvn package 3● idea加载 4● run启动 ==== ...
- PS笔刷的使用
直接进入正文了! 第一步 打开你的ps,至少是CS6哦,没有安装包的可以去网上找,或者找我0.0. 第二步 将面板改为绘画功能. 第三步打开“窗口”调出“画笔”“画笔预设”“图层”等面板,“颜色”面板 ...
- vue.js 自带阻止默认事件 阻止冒泡
<!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 ...