移动端左右、上下滑动:
当页面中既需要页面滑动操作,又需要上下或左右滑动页面上的某个元素时,直接使用zepto中提供的swipe事件是不能直接达到目的的,原因如下:
(1)在Android低端机上touchEnd会不被触发。
(2)zepto中的swipe 事件通过 事件冒泡机制实现事件监听
在document上统一监听touchstart、 touchmove、 touchend, 然后判断是上下滑动还是左右滑动。 再判断document的touch事件是由哪个元素上的touch事件冒泡上来的, 再触发该元素上的滑动事件。
直接在某个元素上绑定swipe事件,会冒泡至body上,如果是上下滑动会触发页面滚动,导致在滑动元素的时候页面也在滚动。
滑动事件触发过程:
(1)IOS 上 当触发 "swipe"时, 依次产生如下事件: touchstart - > touchmove * 多次 - > touchend - > scroll
(2)Android4.x上touchend不触发-- > touchmove时, 阻止默认事件, touchend才会被触发
touchstart - > touchmove - > touchcancel - > scroll * 多次
并且在Android低版本上还会出现单击一下,会有位移差的现象。

所以,通过下面脚本重写swipe事件,解决上面的问题。

/**
* 滑动事件 Android 4.0 will not fire touchend event
*/
define(function(require,exports,module){ function SwipeEvent(selector){
this.selector = selector;
this.swipeLeftCallback = function(){};
this.swipeRightCallback = function(){};
this.swipeUpCallback = function(){};
this.swipeDownCallback = function(){};
this._initSwipe(selector);
}
SwipeEvent.prototype.bind = function(evtName,callback){
switch(evtName){
case "swipeLeft":
this.swipeLeftCallback = callback;
break;
case "swipeRight":
this.swipeRightCallback = callback;
break;
case "swipeUp":
this.swipeUpCallback = callback;
break;
case "swipeDown":
this.swipeDownCallback = callback;
break;
}
};
SwipeEvent.prototype._initSwipe = function(selector){
var self = this;
var startX, startY;
var endX, endY;
var distanceX, distanceY;
$(selector).on('touchstart', function(event) {
startX = event.targetTouches[0].clientX; //位于当前DOM元素上手指的列表。
startY = event.targetTouches[0].clientY;
}).on("touchmove",function(event){
endX = event.changedTouches[0].clientX;
endY = event.changedTouches[0].clientY; //涉及当前事件手指的列表。
distanceX = Math.abs(startX - endX);
distanceY = Math.abs(startY - endY);
if(distanceX > 1 || distanceY > 1){ //判断是左右滑动或上下滑动,阻止默认事件 使android4 touchend生效
event.preventDefault();
}
event.stopPropagation();
}).on('touchend', function(event) {
endX = event.changedTouches[0].clientX;
endY = event.changedTouches[0].clientY;
distanceX = Math.abs(startX - endX);
distanceY = Math.abs(startY - endY);
if(distanceX > 10 || distanceY > 10){ //安卓4.X里,单击一次也会产生位移差
if (distanceX >= distanceY) { //左右滑动
if(startX - endX > 0){
self.swipeLeftCallback(event);
}else if(startX - endX < 0){
self.swipeRightCallback(event);
}
}else{
if(startY - endY > 0){
self.swipeUpCallback(event);
}else if(startY - endY < 0){
self.swipeDownCallback(event);
}
}
}
});
};
module.exports = SwipeEvent;
});

参考:http://www.cnblogs.com/ytu2010dt/p/5767491.html

http://www.myexception.cn/web/1874295.html

解决Android下元素滑动问题的更多相关文章

  1. 有关ViewPager的使用及解决Android下ViewPager和PagerAdapter中调用notifyDataSetChanged失效的问题

    ViewPager是android-support-v4.jar包中的一个系统控件,继承自ViewGroup,专门用以实现左右滑动切换View的效果,使用时需要首先在Project->prope ...

  2. Android 解决Gallery下ScrollView滑动事件冲突

    在Gallery下,里面内容过长超出屏幕,这时我们可以用ScrollView来滚动,但是这样做了以后,会发现一个问题,Gallery的滑动事件和ScrollView的滑动事件起冲突,这时我们可以自定义 ...

  3. ios下元素溢出设置 overflow:auto; 不能滑动解决办法

    ios下元素溢出设置 overflow:auto; 不能滑动解决办法: overflow:auto; overflow-y:scroll; -webkit-overflow-scrolling:tou ...

  4. 移动web在ios和android下点击元素出现阴影问题

     移动web开发经验总结 1.-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影.备注:transp ...

  5. 如何解决ADT17下Android第三方jar包NoClassDefFoundError的错误

    转自:http://blog.csdn.net/huzgd/article/details/7604069本人已试过第二种解决方法可行!! 原文:Posted by Foxykeep on 22/03 ...

  6. 解决IE8下opacity属性失效问题,无法隐藏元素

    解决IE8下opacity属性失效问题   由于opacity属性存在兼容性问题,所以在IE8下,用opacity来设置元素的透明度,会失效,从而导致页面的样式问题.在IE8及其更早的浏览器下,我们可 ...

  7. Android NestedScrolling嵌套滑动机制

    Android NestedScrolling嵌套滑动机制 最近项目要用到官网的下拉刷新SwipeRefreshLayout,它是个容器,包裹各种控件实现下拉,不像以前自己要实现事件的拦截,都是通过对 ...

  8. Android View的滑动

    Android View的滑动 文章目录 Android View的滑动 一.实现移动 1.1 layout() 1.2 设置位置偏移量 1.3 改变布局参数 1.4 动画 1.5 ScrollTo以 ...

  9. CSharp程序员学Android开发---3.Android内部元素不填充BUG

    最近公司组织项目组成员开发一个Android项目的Demo,之前没有人有Andoid方面的开发经验,都是开发C#的. 虽说项目要求并不是很高,但是对于没有这方面经验的人来说,第一步是最困难的. 项目历 ...

随机推荐

  1. [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标

    有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...

  2. Vi快捷操作 vim配置【shell文件格式从windows转换为linux】

    vim配置 http://www.cnblogs.com/ma6174/archive/2011/12/10/2283393.html gg 首行 dd 删除当前行 :.,$d  删除全部内容 :se ...

  3. Ngnix技术研究系列2-基于Redis实现动态路由

    上篇博文我们写了个引子: Ngnix技术研究系列1-通过应用场景看Nginx的反向代理 发现了新大陆,OpenResty OpenResty 是一个基于 Nginx 与 Lua 的高性能 Web 平台 ...

  4. 机器学习-KNN分类器

    1.  K-近邻(k-Nearest Neighbors,KNN)的原理 通过测量不同特征值之间的距离来衡量相似度的方法进行分类. 2.  KNN算法过程 训练样本集:样本集中每个特征值都已经做好类别 ...

  5. E. Exposition

                                                                        E. Exposition time limit per tes ...

  6. Number Complement

    Given a positive integer, output its complement number. The complement strategy is to flip the bits ...

  7. 【JAVA零基础入门系列】Day4 变量与常量

    这一篇主要讲解Java中的变量,什么是变量,变量的作用以及如何声明,使用变量. 那么什么是变量?对于初学者而言,可以将变量理解为盒子,这些盒子可以用来存放数据,不同类型的数据需要放在对应类型的盒子里. ...

  8. Struts201---环境搭配

    开发工具:Eclipse   Struts版本:2.3.24 最近在学SSH框架,SSH是 struts+spring+hibernate的一个集成框架,是目前比较流行的一种Web应用程序开源框架.集 ...

  9. LCT学习笔记

    最近自学了一下LCT(Link-Cut-Tree),参考了Saramanda及Yang_Zhe等众多大神的论文博客,对LCT有了一个初步的认识,LCT是一种动态树,可以处理动态问题的算法.对于树分治中 ...

  10. 在ubuntu16.04中安装apache2+modsecurity以及自定义WAF规则详解

    一.Modsecurity规则语法示例 SecRule是ModSecurity主要的指令,用于创建安全规则.其基本语法如下: SecRule VARIABLES OPERATOR [ACTIONS] ...