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 所有孩子节点的事件传递
界面:
层级结构:
代码实现:
- preventSlidingAccidents: function(panel){
- panel.setSwallowTouches(false);
- // ----------------------------- 防止滑动误触 by Mike -------------------------START-------
- var panelLayout = panel.getChildByName("panelLayout");
- if(!panelLayout) return;
- var p = panelLayout.parent;
- var childs = p.children;
- var arr = [];
- for(var i = 0; i <childs.length; i++)
- {
- var curNode = childs[i];
- var curNodeDescription = curNode.getDescription();
- if(curNodeDescription !== "Layout")
- {
- arr.push(curNode);
- }
- }
- var addViewListener = function(arr){
- return cc.EventListener.create({
- event: cc.EventListener.TOUCH_ONE_BY_ONE,
- swallowTouches: false,
- onTouchBegan: function (touch, event) {
- return true;
- },
- onTouchMoved: function (touch, event) {
- // cc.log("========== onTouchMoved");
- var target = event.getCurrentTarget();
- var movePos = touch.getDelta();
- var limitX = 1;
- var limitY = 1;
- var pos = target.getParent().convertTouchToNodeSpace(touch);
- if(cc.rectContainsPoint(target.getBoundingBox(), pos)) {
- // cc.log("=================== limitX =====" + limitX);
- // cc.log("=================== limitY =====" + limitY);
- // cc.log("=================== movePos =====" + JSON.stringify(movePos));
- if (Math.abs(movePos.x)> limitX || Math.abs(movePos.y)> limitY) {
- for(var i = 0; i < arr.length; i++) {
- cc.eventManager.pauseTarget(arr[i], true);
- }
- }
- else{
- for(var i = 0; i < arr.length; i++) {
- cc.eventManager.resumeTarget(arr[i], true);
- }
- }
- }
- return true;
- },
- onTouchEnded:function (touch, event) {
- // cc.log("========== onTouchEnded");
- for(var i = 0; i < arr.length; i++) {
- cc.eventManager.resumeTarget(arr[i], true);
- }
- }});
- };
- cc.eventManager.addListener(addViewListener(arr), panelLayout);
- // ----------------------------- 防止滑动误触 by Mike ---------------------------END-----
- }
来源: http://www.bubuko.com/infodetail-2850158.html