解决touchend与内部元素冒泡问题

$(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);
   }
  }
  
 });
});
相关文章
相关标签/搜索