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

2019独角兽企业重金招聘Python工程师标准>>>

$(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()，处理内容页面的切换。
如果有朋友有更合理简单的方法能够解决这个问题的话，请留言给我，万分感谢。

$(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);
   }
  }
  
 });
});

转载于:https://my.oschina.net/leftheart/blog/646778