解決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()，處理內容頁面的切換。
若是有朋友有更合理簡單的方法可以解決這個問題的話，請留言給我，萬分感謝。

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