如图,移动端的web需要图片轮播和滑动切换,每一张海报是一个<a>
标签,可以点击。
既然要轮播和滑动切换,区域内需要监听左滑和右滑动,于是我是这样实现的:
App.prototype.addLister = function() { var startX = "", endX = "", moveX = ""; var offset = document.getElementById('offset'); //轮播的窗口 var self = this; offset.addEventListener('touchstart', function(event) { event.preventDefault(); startX = event.targetTouches[0].pageX; //触碰开始时的X坐标 }, false); offset.addEventListener('touchend', function(event) { endX = event.changedTouches[0].pageX; //触碰结束时的X坐标 moveX = startX - endX; //计算差值,超过一定范围则调用相应函数 if (moveX > 20) { self.moveLeft(offset); //监听到左滑动时触发的函数 } if (moveX < -20) { self.moveRight(offset); //监听到右滑动时触发的函数 } }, false); }
然而,这样实现后,区域内点击<a>
标签就没有反映了。可有解决方案?? 谢谢!
叮当猫咪
相关分类