查看: 1295|回复: 7
移动端UC浏览器上实现左滑右滑效果，而不触发UC的返回上一页
最近使用zepto.touch.js中的swipe写了个滑动图片的效果，在UC浏览器中滑动不了，一滑动就触发了UC默认的翻到上一页去了，但在猎豹手机浏览器中，滑动是妥妥的，请问各位大神们，这个要咋解决？
肯定页面是加了event.preventDefault()。。。
肯定页面是加了event.preventDefault()。。。
我没阻止默认事件 ，后来我写了阻止默认事件冒泡，也不行。
是不是zepto的touch插件中的swipeLeft , swipeRight在UC上是不兼容的？
如果不兼容，那你们怎么解决这个问题的
我没阻止默认事件 ，后来我写了阻止默认事件冒泡，也不行。
是不是zepto的touch插件中的swipeLeft , swi ...
没试过UC的，查一下它的文档看有没有api吧。
应该跟zepto没多大关系，判断左右滑动的事件都大同小异，加preventDefault()好像也没用，我理解为这是浏览器自身的事件：
1，你的猎豹浏览器有没有向右滑动后退的功能，如果有，可能是不同浏览器的判断不一样，比如说从边框开始滑动才触发
2，同一浏览器在不同手机上的表现可能会不一样，可能在apple上会灵敏一些，在android上没那么灵敏，比如我在我的android机器上测试uc就没那么容易触发后退事件，往往要滑动好几次才触发
3，如果有必要的话就换上下滑咯，避免这个问题
我也遇到过这个问题，后来改了点zepto的源码修复了
本帖最后由 amudu 于
16:18 编辑
我也遇到过这个问题，后来改了点zepto的源码修复了
已经fork了你的github，但是没试过，如果你的readme.md文档能更加详细点的话，就更棒了！而且，我没有成功使用你的代码 ，估计是因为我比较笨&&-.-
本帖最后由 wojiushiwoltq 于
14:44 编辑
已经fork了你的github，但是没试过，如果你的readme.md文档能更加详细点的话，就更棒了！而且，我没有成 ...
,这个就是我用修改后的zepto弄的，是可以使用浏览器的默认事件的；
先引入zepto,再引入touch和event就可以可以使用zepto的swipeLeft和swipeRight等事件了安卓原生浏览器中touch事件中touchmove不好使？ | 指鹤印记点击应该触发 touchstart 和 touchend 两个事件，但是安卓手机中并没有触发 touchend，请问如何解决这个问题？
touch事件在手机浏览器上存在莫名的兼容性问题, 会导致touchend事件不触发!On Android ICS if no preventDefault is called on touchstart or the first touchmove, further touchmove events and the touchend will not be fired.As a workaround we need to decide in the first touchmove if this is a scroll (so we don’t call preventDefault) and then manually trigger touchend.如果你没有太多顾虑(关于scroll的), 请在touchstart的handle中使用event.preventDefault(), 即可让touchend事件正常触发
F2E, Full Stack Dev页面导航：
→ 正文内容 js实现touch移动触屏滑动事件
js实现touch移动触屏滑动事件
在开始描述touch事件之前，需要先描述一下多触式系统中特有的touch对象（android和iOS乃至nokia最新的meego系统都模拟了类 似的对象）。这个对象封装一次屏幕触摸，一般来自于手指。它在touch事件触发的时候产生，可以 通过touch event handler的event对象取到
移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click和mouseover等事件来完成。但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。
以下是四种touch事件
touchstart: //手指放到屏幕上时触发
touchmove: //手指在屏幕上滑动式触发
touchend: //手指离开屏幕时触发
touchcancel: //系统取消touch事件的时候触发，这个好像比较少用
每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表
touches: //当前屏幕上所有手指的列表
targetTouches: //当前dom元素上手指的列表，尽量使用这个代替touches
changedTouches: //涉及当前事件的手指的列表，尽量使用这个代替touches
这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：
clientX / clientY: //触摸点相对浏览器窗口的位置
pageX / pageY: //触摸点相对于页面的位置
screenX / screenY: //触摸点相对于屏幕的位置
identifier: //touch对象的ID
target: //当前的DOM元素
手指在滑动整个屏幕时，会影响浏览器的行为，比如滚动和缩放。所以在调用touch事件时，要注意禁止缩放和滚动。
1.禁止缩放
通过meta元标签来设置。
2.禁止滚动
preventDefault是阻止默认行为，touch事件的默认行为就是滚动。
event.preventDefault();
使用案例：
&!DOCTYPE html&
&meta http-equiv="Content-Type" Content="text/ charset=utf-8;"&
&title&移动端触摸滑动&/title&
&meta name="author" content="rainna" /&
&meta name="keywords" content="rainna's js lib" /&
&meta name="description" content="移动端触摸滑动" /&
&meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no"&
*{margin:0;padding:0;}
li{list-style:}.m-slider{width:600margin:50px 20overflow:}
.m-slider .cnt{position:left:0;width:3000}
.m-slider .cnt li{float:width:600}
.m-slider .cnt img{display:width:100%;height:450}
.m-slider .cnt p{margin:20px 0;}
.m-slider .icons{text-align:color:#000;}
.m-slider .icons span{margin:0 5}
.m-slider .icons .curr{color:}
.f-anim{-webkit-transition:left .2}
&div class="m-slider"&
&ul class="cnt" id="slider"&
&img src="http://imglf1.ph.126.net/qKodH3sZoVbPalKFtHS9mw==/9322175.jpg"&
&p&镜面的世界，终究只是倒影。看得到你的身影，却触摸不到你的未来&/p&
&img src="http://imglf1.ph.126.net/40-jqH_j6EoCWnZOixY2pA==/0310215.jpg"&
&p&锡林浩特前往东乌旗S101必经之处，一条极美的铁路。铁路下面是个小型的盐沼，淡淡的有了一丝天空之境的感觉。可惜在此玩了一个小时也没有看见一列火车经过，只好继续赶往东乌旗。&/p&
&img src="http://imglf0.ph.126.net/Jnmi2y51zVdjKAYlibtpFw==/7481166.jpg"&
&p&水的颜色为什么那么蓝，我也纳闷，反正自然饱和度和对比度拉完就是这个颜色的&/p&
&img src="http://imglf1.ph.126.net/79GPsjhwiIj8e-0nP5MsEQ==/9949331.jpg"&
&p&海洋星球3重庆天气热得我想卧轨自杀&/p&
&img src="http://imglf1.ph.126.net/40-jqH_j6EoCWnZOixY2pA==/0310215.jpg"&
&p&以上这些作品分别来自两位设计师作为观者，您能否通过设计风格进行区分&/p&
&div class="icons" id="icons"&
&span class="curr"&1&/span&
&span&2&/span&
&span&3&/span&
&span&4&/span&
&span&5&/span&
var slider = {
//判断设备是否支持touch事件
touch:('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
slider:document.getElementById('slider'),
index:0, //显示元素的索引
slider:this.slider, //this为slider对象
icons:document.getElementById('icons'),
icon:this.icons.getElementsByTagName('span'),
handleEvent:function(event){
var self = //this指events对象
if(event.type == 'touchstart'){
self.start(event);
}else if(event.type == 'touchmove'){
self.move(event);
}else if(event.type == 'touchend'){
self.end(event);
//滑动开始
start:function(event){
var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch
startPos = {x:touch.pageX,y:touch.pageY,time:+new Date}; //取第一个touch的坐标值
isScrolling = 0; //这个参数判断是垂直滚动还是水平滚动
this.slider.addEventListener('touchmove',this,false);
this.slider.addEventListener('touchend',this,false);
move:function(event){
//当屏幕有多个touch或者页面被缩放过，就不执行move操作
if(event.targetTouches.length & 1 || event.scale && event.scale !== 1)
var touch = event.targetTouches[0];
endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};
isScrolling = Math.abs(endPos.x) & Math.abs(endPos.y) ? 1:0; //isScrolling为1时，表示纵向滑动，0为横向滑动
if(isScrolling === 0){
event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏
this.slider.className = 'cnt';
this.slider.style.left = -this.index*600 + endPos.x + 'px';
//滑动释放
end:function(event){
var duration = +new Date - startPos. //滑动的持续时间
if(isScrolling === 0){ //当为水平滚动时
this.icon[this.index].className = '';
if(Number(duration) & 10){
//判断是左移还是右移，当偏移量大于10时执行
if(endPos.x & 10){
if(this.index !== 0) this.index -= 1;
}else if(endPos.x & -10){
if(this.index !== this.icon.length-1) this.index += 1;
this.icon[this.index].className = 'curr';
this.slider.className = 'cnt f-anim';
this.slider.style.left = -this.index*600 + 'px';
//解绑事件
this.slider.removeEventListener('touchmove',this,false);
this.slider.removeEventListener('touchend',this,false);
init:function(){
var self = //this指slider对象
if(!!self.touch) self.slider.addEventListener('touchstart',self.events,false); //addEventListener第二个参数可以传一个对象，会调用该对象的handleEvent属性
slider.init();
以上所述就是本文的全部内容了，希望大家能够喜欢。
您可能感兴趣的文章:
上一篇：下一篇：
最 近 更 新
热 点 排 行
12345678910}