解决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);
  }
 });
});

你可能感兴趣的:(js,冒泡,手机WEB,touchEnd)