$(".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滑动事件代码的更多相关文章

  1. 移动设备、手机浏览器Javascript滑动事件代码

    以下经过本人测试成功. 测试平台:三星S5830I 操作系统:Android 2.3.6 浏览器:UC浏览器 HTML标准:HTML5 测试了三个事件:touchstart.touchmove 和 t ...

  2. html5 touch事件实现触屏页面上下滑动(二)

    五一小长假哪都没去,睡了三天,今天晕晕沉沉的投入工作了,但还是做出了一点点效果 上周用html5的touch事件把简单的滑动做出来了,实现了持续页面上下滑动的效果,参考之前 的文章及代码html5 t ...

  3. HTML5滑动(swipe)事件

    移动H5开发中经常用到滑动效果(页面上移.下移.向左滑动.向右滑动等),浏览器并没有内置swipe事件,可以通过touch事件(touchstart.touchmove和touchend)模拟swip ...

  4. 移动端上下滑动事件之--坑爹的touch.js

    下面的方法,不知道是操作方法不对还是啥.  在 zepto.js 里面加那一段代码不起作用 百度的 touch.js 是可以用的,但是使用方式 和 zepto有点不一样. 解决方案:参照这个链接地址 ...

  5. 移动端上下滑动事件之--坑爹的touch.js

    原文   http://blog.csdn.net/minidrupal/article/details/39611605 移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和htm ...

  6. webview滑动事件 与内部html左右滑动事件冲突问题的解决办法

    最近在做个混合app , 用html做页面,然后通过webview嵌套在activity中,效果是这样: 开始还是比较顺利,增加了菜单退出按钮,返回键页面回退功能,页面加载显示加载图标(在app端实现 ...

  7. 关于dom节点绑定滑动事件导致浏览器上下滑动失效解决方案--黄丕巧

    1.移动端开发往往需要添加一下自定义的左右滑动事件,但是添加了左右滑动事件之后就要阻止浏览器大默认事件,否则dom节点的滑动事件和浏览器本身的滑动会出现冲突,导致滑动的时候会出现消失瞬间再出现的效果 ...

  8. android ViewPager滑动事件讲解

    首先ViewPager在处理滑动事件的时候要用到OnPageChangeListener OnPageChangeListener这个接口需要实现三个方法:(onPageScrollStateChan ...

  9. Android onTouch、OnLongClick、onClick和ScrollView滑动事件冲突

    为了实现近期录制的长按,松开手指,结束录制功能.在项目,难道你去走一走会头晕,书写demo为了下一个梳理. 顺便研究android事件调用机制. 先上效果界面: 布局: <RelativeLay ...

随机推荐

  1. 【python 3】 列表方法操作汇总

    基础数据类型 : list list主要操作:索引.切片.查询.修改.增加.删除.扩展.统计.排序.获取下标.拷贝…… 1.1  索引  由图: list正向下标从0开始 list反向下标从-1开始 ...

  2. 从scratch到python——猜数游戏

    ` 之前讲解了从scratch到python,基于python turtle库的实现,讲解了用scratch和python turtle绘图的实现,以及让小猫动起来和当角色被单击的例子. 本节课讲继续 ...

  3. CPU高的排查

    之前有朋友反馈说发的内容希望有个梯度,逐步加深,前面发了几篇关于jvm源码分析的文章,可能我觉得我已经把内容写得浅显易懂了,但是对于某些没怎么接触的同学来说还是比较难理解,这个我以后慢慢改进吧,今天发 ...

  4. js点滴3 vs vue

    web Components 学习之路 https://www.cnblogs.com/zhaowinter/p/5447246.html vue学习指路. vue全局配置. ignoredEleme ...

  5. Asp.net core 学习笔记 Fluent Validation

    之前就有在 .net 时代介绍过了. 这个 dll 也支持 .net core 而且一直有人维护. 对比 data annotation 的 validation, 我越来越觉得这个 fluent 好 ...

  6. jmeter的安装和配置

    jmeter环境配置 Java 8 安装 正常安装,一路默认就好,记住安装路径,配置环境变量时用得到.默认安装路径:C:\Program Files\Java\jdk1.8.0_91. 安装好之后会有 ...

  7. CORS在Spring中的实现

    CORS: 通常情况下浏览器禁止AJAX从外部获取资源,因此就衍生了CORS这一标准体系,来实现跨域请求. CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origi ...

  8. 关于分布式版本控制系统Git与集中式版本控制系统SVN的区别

    我觉得最最主要的区别就是:分布式Git主要是在本地有各个历史版本,在不联网的时候,也可以更新到最新版本和查看过去的版本,而集中式SVN是所有人都将版本上传到中央服务器,当出现断网情况的时候,用户只有一 ...

  9. cookie与sessionStorage机制

    sessionStorage.localStorage和cookie的区别 共同点:都是保存在浏览器端.且同源的 区别: 1.cookie数据始终在同源的http请求中携带(即使不需要),即cooki ...

  10. javascript高级程序设计第3版——第7章 函数表达式

    此张内容的难点在于闭包.而闭包又涉及到原型,原型链,执行上下环境,this的取值等知识点.(此章节对于闭包的内容篇幅较少,且写的很是艰涩难懂,推荐一位大牛的博客,对于闭包的前因后果以及作用机制写的很明 ...