Authored by biao

修复购物车面板滑动问题。code review by LZF

@@ -71,44 +71,99 @@ function setEditModeWithSknId(sknId, isThisGoodSelected) { @@ -71,44 +71,99 @@ function setEditModeWithSknId(sknId, isThisGoodSelected) {
71 isSelected = isThisGoodSelected; 71 isSelected = isThisGoodSelected;
72 } 72 }
73 73
74 -function preventDefault(event) {  
75 - var e = event || window.event; 74 +function preventDefault(e) {
  75 + e = e || window.event;
  76 + e.preventDefault && e.preventDefault();
  77 + e.returnValue = false;
  78 +}
76 79
77 - var $target = $(e.target); 80 +function stopPropagation(e){
  81 + e = e || window.event;
  82 + e.stopPropagation && e.stopPropagation();
  83 + e.cancelBubble = false;
  84 +}
78 85
79 - if (($target.hasClass('.chose-items') || $target.closest('chose-items')) &&  
80 - ($('.color-list').find('ul').not('.hide').find('li').length > 4 ||  
81 - $('.size-list').find('ul').not('.hide').find('li').length > 4)) {  
82 - e.stopPropagation(); 86 +function innerScroll(e){
  87 + var delta = e.wheelDelta || e.originalEvent.wheelDelta || e.detail || 0,
  88 + box = $(this).get(0);
  89 +
  90 + // 阻止冒泡到document
  91 + // document上已经preventDefault
  92 + stopPropagation(e);
  93 +
  94 +
  95 + if($(box).height() + box.scrollTop >= box.scrollHeight){
  96 + if(delta < 0) {
  97 + preventDefault(e);
  98 + return false;
  99 + }
  100 + }
  101 + if(box.scrollTop === 0){
  102 + if(delta > 0) {
  103 + preventDefault(e);
83 return false; 104 return false;
84 } 105 }
  106 + }
  107 + // 会阻止原生滚动
  108 + // return false;
  109 +}
  110 +
  111 +function disableScroll() {
  112 + var startX, startY;
  113 +
  114 + var $choseArea = $('.chose-panel .main .chose-items');
  115 +
  116 + // 内部可滚
  117 + $choseArea.on('mousewheel', innerScroll);
  118 +
  119 + // 移动端touch重写
  120 + $choseArea.on('touchstart', function(e) {
  121 + startX = e.originalEvent.changedTouches[0].pageX;
  122 + startY = e.originalEvent.changedTouches[0].pageY;
  123 + });
  124 +
  125 + // 仿innerScroll方法
  126 + $choseArea.on('touchmove', function(e) {
  127 + e.stopPropagation();
  128 +
  129 + var deltaX = e.originalEvent.changedTouches[0].pageX - startX;
  130 + var deltaY = e.originalEvent.changedTouches[0].pageY - startY;
85 131
86 - if (e.preventDefault) { 132 + // 只能纵向滚
  133 + if (Math.abs(deltaY) < Math.abs(deltaX)) {
87 e.preventDefault(); 134 e.preventDefault();
  135 + return false;
88 } 136 }
89 - e.returnValue = false;  
90 -}  
91 137
92 -function disableScroll(e) { 138 + var box = $(this).get(0);
93 139
94 - // older FF  
95 - if (window.addEventListener) {  
96 - window.addEventListener('DOMMouseScroll', preventDefault, false); 140 + if ($(box).height() + box.scrollTop >= box.scrollHeight) {
  141 + if (deltaY < 0) {
  142 + e.preventDefault();
  143 + return false;
  144 + }
  145 + }
  146 + if (box.scrollTop === 0) {
  147 + if (deltaY > 0) {
  148 + e.preventDefault();
  149 + return false;
  150 + }
97 } 151 }
  152 + });
98 153
99 - window.onwheel = preventDefault; // modern standard  
100 - window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE  
101 - window.ontouchmove = preventDefault; // mobile 154 + $(document).on('mousewheel', preventDefault);
  155 + $(document).on('touchmove', preventDefault);
102 } 156 }
103 157
104 function enableScroll() { 158 function enableScroll() {
105 - if (window.removeEventListener) {  
106 - window.removeEventListener('DOMMouseScroll', preventDefault, false);  
107 - }  
108 - window.onmousewheel = document.onmousewheel = null;  
109 - window.onwheel = null;  
110 - window.ontouchmove = null;  
111 - document.onkeydown = null; 159 + var $choseArea = $('.chose-panel .main .chose-items');
  160 +
  161 + $choseArea.off('touchstart');
  162 + $choseArea.off('touchmove');
  163 + $choseArea.off('mousewheel');
  164 +
  165 + $(document).off('mousewheel', preventDefault);
  166 + $(document).off('touchmove', preventDefault);
112 } 167 }
113 168
114 //删除面板 169 //删除面板
@@ -159,10 +214,12 @@ function show(html, cb) { @@ -159,10 +214,12 @@ function show(html, cb) {
159 } 214 }
160 init(); 215 init();
161 } 216 }
  217 +
162 $('.chose-panel').show(); 218 $('.chose-panel').show();
163 $num = $('#good-num'); 219 $num = $('#good-num');
164 cbFn = cb; 220 cbFn = cb;
165 221
  222 +
166 disableScroll(); 223 disableScroll();
167 } 224 }
168 225