浅谈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 }
后续工作，发现了一种更加简单的方法，不用添加节点，就可以阻挡滑动事件的触发
setTextClick: function (listnode,number,radio,callback) {
var that = this;
var _callback = callback || function(){};
return cc.EventListener.create({
event: cc.EventListener.TOUCH_ONE_BY_ONE,
swallowTouches: false,
onTouchBegan: function (touch, event) {
if(radio) radio.childIsMove = false;
},
onTouchMoved: function (touch, event) {
if(radio) radio.childIsMove = true;
},
onTouchEnded: function (touch, event) {
if(radio && radio.childIsMove) return; // 如果复选框的子节点（文字或者图片）被滑动
}
)}
}
声明：此文为原创文章，未经作者允许，禁止转载！
如果你觉得本文对你有帮助，欢迎支持，请用力拿钱砸向我吧！
