淺談Cocos2d-js ListView滑動防止誤觸

Event背景

最近，接到一個需求，優化房間內設置界面：

表面問題：用戶在按鈕表面，滑動界面的時候，總會誤觸到界面上的按鈕或者複選框

根本問題：因爲ListView的事件具備傳遞性，致使雙重事件觸發，既滑動又選中了按鈕

解決方案：在listView上，addChild一個Layout，加以觸摸事件監聽，阻止和傳遞事件

聰明的我一會兒就想到了~

 

具體方案：

1. 在onTouchMoved的時候，判斷用戶點擊位置是Layout，仍是ListView的子節點（按鈕和複選框）

a: 若是觸摸的是Layout以外的節點，阻止ListView除Layout自身外，全部孩子節點事件傳遞（防止誤觸的關鍵） 

    cc.eventManager.pauseTarget(allChildren, true);

b: 若是觸摸是Layout自己本身，恢復ListView全部孩子節點事件傳遞                                            

    cc.eventManager.resumeTarget(allChildren, true);

 

 2.在onTouchEnded的時候，恢復ListView全部孩子節點的事件傳遞

 

界面：

 

層級結構：

 

 代碼實現：

 1     preventSlidingAccidents: function(panel){
 2         panel.setSwallowTouches(false); 3 // ----------------------------- 防止滑動誤觸 by Mike -------------------------START------- 4 var panelLayout = panel.getChildByName("panelLayout"); 5 if(!panelLayout) return; 6 var p = panelLayout.parent; 7 var childs = p.children; 8 var arr = []; 9 for(var i = 0; i < childs.length; i++) 10  { 11 var curNode = childs[i]; 12 var curNodeDescription = curNode.getDescription(); 13 if(curNodeDescription !== "Layout") 14  { 15  arr.push(curNode); 16  } 17  } 18 19 var addViewListener = function(arr){ 20 return cc.EventListener.create({ 21  event: cc.EventListener.TOUCH_ONE_BY_ONE, 22 swallowTouches: false, 23 onTouchBegan: function (touch, event) { 24 return true; 25  }, 26 onTouchMoved: function (touch, event) { 27 // cc.log(" ========== onTouchMoved"); 28 var target = event.getCurrentTarget(); 29 var movePos = touch.getDelta(); 30 var limitX = 1; 31 var limitY = 1; 32 var pos = target.getParent().convertTouchToNodeSpace(touch); 33 if(cc.rectContainsPoint(target.getBoundingBox(), pos)) { 34 // cc.log("=================== limitX ===== " + limitX); 35 // cc.log("=================== limitY ===== " + limitY); 36 // cc.log("=================== movePos ===== " + JSON.stringify(movePos)); 37 if (Math.abs(movePos.x) > limitX || Math.abs(movePos.y) > limitY) { 38 for(var i = 0; i < arr.length; i++) { 39 cc.eventManager.pauseTarget(arr[i], true); 40  } 41  } 42 else{ 43 for(var i = 0; i < arr.length; i++) { 44 cc.eventManager.resumeTarget(arr[i], true); 45  } 46  } 47  } 48 return true; 49  }, 50 onTouchEnded:function (touch, event) { 51 // cc.log(" ========== onTouchEnded"); 52 for(var i = 0; i < arr.length; i++) { 53 cc.eventManager.resumeTarget(arr[i], true); 54  } 55  }}); 56  }; 57  cc.eventManager.addListener(addViewListener(arr), panelLayout); 58 // ----------------------------- 防止滑動誤觸 by Mike ---------------------------END----- 59 }

 

 

 聲明：此文爲原創文章，未經做者容許，禁止轉載！

 

 

 

若是你以爲本文對你有幫助，歡迎支持，請用力拿錢砸向我吧！