$(document).ready(function(){//全局变量,触摸开始位置 var startX = 0;//, startY = 0; //touchstart :手指放在一个DOM元素上。 //touchmove :手指拖曳一个DOM元素 //touchend :手指从一个DOM元素上移开 $(".main_con_title").on("touchstart", function(e) { //若是提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) //所以它支持W3C的stopPropagation()方法 e.stopPropagation(); else //不然,咱们须要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; startX = e.originalEvent.changedTouches[0].pageX; //startY = e.originalEvent.changedTouches[0].pageY; }); $(".main_con_title").on("touchend", function(e) { //若是提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) //所以它支持W3C的stopPropagation()方法 e.stopPropagation(); else //不然,咱们须要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; moveEndX = e.originalEvent.changedTouches[0].pageX, //moveEndY = e.originalEvent.changedTouches[0].pageY, X = moveEndX - startX; //Y = moveEndY - startY; if ( X > 0 ) { //测试滑动效果是向左滑动 $('.main_con_title ul').animate({left:'0px'},300); } if ( X < 0 ) { //测试滑动效果是向右滑动 $('.main_con_title ul').animate({left:$(document).width()-$('.main_con_title ul').width()+"px"},300); } }); });
注:此处解决了事件冒泡问题,可是出现了新的问题,不少浏览器没法执行touch事件,缘由是e.preventDefault();//阻止它的默认行为的发生而发生其余,咱们须要阻止默认行为的发生;可是在这里却不能同时处理这两个问题,因而我不知道该怎么办了;想了很久,用了笨办法,我阻止了默认为,用了:e.preventDefault(),而后标题栏目在各个浏览器能够touch滑动,而后我作了相关的逻辑计算,若是用户touch的位置为某标题所在的区域时,则直接调用某function(),处理内容页面的切换。
若是有朋友有更合理简单的方法可以解决这个问题的话,请留言给我,万分感谢。css
$(document).ready(function(){//全局变量,触摸开始位置 var startX = 0;//, startY = 0; //touchstart :手指放在一个DOM元素上。 //touchmove :手指拖曳一个DOM元素 //touchend :手指从一个DOM元素上移开 $(".main_con_title").on("touchstart", function(e) { e.preventDefault();//阻止它的默认行为的发生而发生其余 startX = e.originalEvent.changedTouches[0].pageX; //startY = e.originalEvent.changedTouches[0].pageY; }); $(".main_con_title").on("touchend", function(e) { e.preventDefault();//阻止它的默认行为的发生而发生其余 // //若是提供了事件对象,则这是一个非IE浏览器 // if ( e && e.stopPropagation ){ // //所以它支持W3C的stopPropagation()方法 // e.stopPropagation(); //阻止js事件冒泡的做用 // } // else { // //不然,咱们须要使用IE的方式来取消事件冒泡 // window.event.cancelBubble = true; // } moveEndX = e.originalEvent.changedTouches[0].pageX, //moveEndY = e.originalEvent.changedTouches[0].pageY, X = moveEndX - startX; //Y = moveEndY - startY; if ( X > 50 ) { //测试滑动效果是向左滑动 $('.main_con_title ul').animate({left:'0px'},300); } if ( X < -50 ) { //测试滑动效果是向右滑动 $('.main_con_title ul').animate({left:$(document).width()-$('.main_con_title ul').width()+"px"},300); } //获取浏览器的宽度 //获取4个模块li的宽度 //根据touch触摸点的坐标判断其所在的位置调用相关事件,完成模块的切换 var winWidth = $(window).width(); var ulWidth = $(".main_con_title ul").width(); var li1 = $(".main_con_title ul").children().eq(0).width()+10; var li2 = $(".main_con_title ul").children().eq(1).width()+10; var li3 = $(".main_con_title ul").children().eq(2).width()+10; var li4 = $(".main_con_title ul").children().eq(3).width()+10; var leftNum = $('.main_con_title ul').css("left").substring(0,$('.main_con_title ul').css("left").length-2); if(leftNum==0){ if(startX>=0 && moveEndX<=li1){ yxxxcx_qh(1); } if(startX>=li1 && moveEndX<=li1+li2){ yxxxcx_qh(2); } if(startX>=li1+li2 && moveEndX<=li1+li2+li3){ yxxxcx_qh(3); } if(startX>=li1+li2+li3 && moveEndX<=li1+li2+li3+li4){ yxxxcx_qh(4); } }else{ if(startX>=winWidth-li1-li2-li3-li4 && moveEndX<=winWidth-li2-li3-li4){ yxxxcx_qh(3); } if(startX>=winWidth-li2-li3-li4 && moveEndX<=winWidth-li3-li4){ yxxxcx_qh(3); } if(startX>=winWidth-li3-li4 && moveEndX<=winWidth-li4){ yxxxcx_qh(3); } if(startX>=winWidth-li4 && moveEndX<=winWidth){ yxxxcx_qh(4); } } }); });