cocos2dx-js 鼠标事件管理器

在cocos2dx-js里面,你为每个节点添加鼠标事件就得添加一段类似下面的代码:

var node = 当前需要添加鼠标事件的节点
var listener = cc.EventListener.create({
event : cc.EventListener.MOUSE,
onMouseDown : function(event){
... //按下鼠标处理
},
onMouseUp : function(event){
... //松开鼠标处理
},
onMouseMove : function(event){
... //移动鼠标处理
},
onMouseScroll : function (event) {
... //滑动鼠标滑轮处理
}
});
cc.eventManager.addListener(listener,node);

并且这里还有注意需要处理的地方.例如你给一个精灵添加鼠标事件后,每当你按下鼠标时它都会触发onMouseDown(),但是这时也许鼠标的位置并不在精灵上面,所以你还得判断鼠标位置才进行后面的处理(除非你就是想要这样的效果).
这是个烦琐过程.下面的鼠标事件管理器就是为了解决这个烦琐过程.
MouseManager.js文件:
var MouseManager = {};
MouseManager.m_bPropagation = true; //传递事件标志(一个总控制)
MouseManager.m_pTypeCode = {
"mousedown" : 1,//000001
"mouseenter" : 2,//000010
"mousemove" : 4,//000100
"mouseleave" : 8,//001000
"mouseup" : 16,//010000
"mousewheel" : 32 //100000
};
MouseManager.enablePropagation = function (propagation) {
MouseManager.m_bPropagation = propagation;
};
MouseManager.mouseDown = function (event) {
var node = event.getCurrentTarget();
var event_node = MouseManager._getEventNode(node);
if (!event_node) {
return;
}
var pos = event.getLocation();
//cc.log("->MouseManager::pressDown x = " + pos.x + ",y = " + pos.y);
var propagation = MouseManager.m_bPropagation;
var nsize = node.getContentSize();
var npos = node.convertToWorldSpace(cc.p(0,0));
var nrect = cc.rect(npos.x,npos.y,nsize.width,nsize.height);
if (node.isVisible() && cc.rectContainsPoint(nrect,pos)) {
//on mouse down
if (event_node["mousedown"] && typeof event_node["mousedown"].cb == 'function') {
if (event_node["mousedown"].target) {
event_node["mousedown"].cb.call(event_node["mousedown"].target,event);
} else {
(event_node["mousedown"].cb)(event);
}
}
event_node.downtag = 1;
//stop propagation
if (!propagation) {
event.stopPropagation();
}
}
};
MouseManager.mouseUp = function (event) {
var node = event.getCurrentTarget();
var event_node = MouseManager._getEventNode(node);
if (!event_node) {
return;
}
var pos = event.getLocation();
//cc.log("->MouseManager::pressUp x = " + pos.x + ",y = " + pos.y);
var nsize = node.getContentSize();
var npos = node.convertToWorldSpace(cc.p(0,nsize.height);
if (event_node.downtag == 1 && node.isVisible() && cc.rectContainsPoint(nrect,pos)) { //event_node.downtag == 1 &&
//on mouse up
if (event_node["mouseup"] && typeof event_node["mouseup"].cb == 'function') {
if (event_node["mouseup"].target) {
event_node["mouseup"].cb.call(event_node["mouseup"].target,event);
} else {
(event_node["mouseup"].cb)(event);
}
}
}
event_node.downtag = 0;
};
MouseManager.mouseMove = function (event) {
var node = event.getCurrentTarget();
var event_node = MouseManager._getEventNode(node);
if (!event_node) {
return;
}
var pos = event.getLocation();
//cc.log("->MouseManager::mouseMove x = " + pos.x + ",pos)) {
//on mouse enter
if (!event_node.movetag || event_node.movetag == 0) {
if (event_node["mouseenter"] && typeof event_node["mouseenter"].cb == 'function') {
if (event_node["mouseenter"].target) {
event_node["mouseenter"].cb.call(event_node["mouseenter"].target,event);
} else {
(event_node["mouseenter"].cb)(event);
}
}
}
event_node.movetag = 1;
//on mouse move
if (event_node["mousemove"] && typeof event_node["mousemove"].cb == 'function') {
if (event_node["mousemove"].target) {
event_node["mousemove"].cb.call(event_node["mousemove"].target,event);
} else {
(event_node["mousemove"].cb)(event);
}
}
//stop propagation
if (!propagation) {
event.stopPropagation();
}
} else {
if (event_node.movetag == 1) {
if (event_node["mouseleave"] && typeof event_node["mouseleave"].cb == 'function') {
if (event_node["mouseleave"].target) {
event_node["mouseleave"].cb.call(event_node["mouseleave"].target,event);
} else {
(event_node["mouseleave"].cb)(event);
}
}
}
event_node.movetag = 0;
}
};
MouseManager.mouseScroll = function (event) {
var node = event.getCurrentTarget();
var event_node = MouseManager._getEventNode(node);
if (!event_node) {
return;
}
var pos = event.getLocation();
//cc.log("-> mouse scroll pos = " + pos.x + "," + pos.y);
var propagation = MouseManager.m_bPropagation;
var nsize = node.getContentSize();
var npos = node.convertToWorldSpace(cc.p(0,pos)) {
//on mouse scroll
if (event_node["mousewheel"] && typeof event_node["mousewheel"].cb == 'function') {
if (event_node["mousewheel"].target) {
event_node["mousewheel"].cb.call(event_node["mousewheel"].target,event);
} else {
(event_node["mousewheel"].cb)(event);
}
}
//stop propagation
if (!propagation) {
event.stopPropagation();
}
}
};
MouseManager.isMouseType = function (event_type) {
if (event_type == "mousedown" || event_type == "mouseenter" || event_type == "mousemove" || event_type == "mouseleave" || event_type == "mouseup" || event_type == "mousewheel") {
return true;
}
return false;
};
MouseManager._getEventNode = function (node) {
return node._a_event_node;
};
MouseManager._createEventNode = function (node) {
event_node = {};
event_node.node = node;
event_node.typecode = 0;
event_node.listener = cc.EventListener.create({
event : cc.EventListener.MOUSE,
onMouseDown : function(event){
MouseManager.mouseDown(event);
},
onMouseUp : function(event){
MouseManager.mouseUp(event);
},
onMouseMove : function(event){
MouseManager.mouseMove(event);
},
onMouseScroll : function (event) {
MouseManager.mouseScroll(event);
}
});
cc.eventManager.addListener(event_node.listener,node);
node._a_event_node = event_node;
return event_node;
};
MouseManager._deleteEventNode = function (node) {
if (!node._a_event_node) {
return;
}
if (node._a_event_node.listener) {
cc.eventManager.removeListener(node._a_event_node.listener);
}
node._a_event_node = null;
};
MouseManager.on = function (type,node,cb,target) {
if (!MouseManager.isMouseType(type) || !node || typeof cb != 'function') {
return;
}
var event_node = MouseManager._getEventNode(node);
if (!event_node) {
event_node = MouseManager._createEventNode(node);
}
event_node[type] = {cb : cb,target : target};
event_node.typecode |= MouseManager.m_pTypeCode[type];
};
MouseManager.off = function (type,node) {
if (!MouseManager.isMouseType(type) || !node) {
return;
}
var event_node = MouseManager._getEventNode(node);
if (!event_node) {
return;
}
var maskcode = ~MouseManager.m_pTypeCode[type];
event_node.typecode &= maskcode;
if (event_node.typecode == 0) {
MouseManager._deleteEventNode(node);
} else {
event_node[type] = null;
}
};
MouseManager.offNode = function (node) {
if (!node) {
return;
}
MouseManager._deleteEventNode(node);
};

对应事件名
* mousedown 当鼠标在目标节点区域按下时触发一次
* mouseenter 当鼠标移入目标节点区域时，不论是否按下
* mousemove 当鼠标在目标节点在目标节点区域中移动时，不论是否按下
* mouseleave 当鼠标移出目标节点区域时，不论是否按下
* mouseup 当鼠标从按下状态松开时触发一次
* mousewheel 当鼠标滚轮滚动时触发

调用示例: var node = new cc.Sprite("res/test.png"); node.setPosition(500,300); parent_node.addChild(node); //添加鼠标事件侦听,当鼠标移进/移出精灵时进行处理 MouseManager.on("mouseenter",function(event) { //event是cc.EventMouse结构 event.stopPropagation(); //停止事件传递 var target = event.getCurrentTarget(); //当前事件触发节点 cc.log("->mouse enter sprite"); }); MouseManager.on("mouseleave",function(event) { event.stopPropagation(); cc.log("->mouse leave sprite"); }); //移除鼠标事件侦听,当不需要时可以一个一个地移除对应的侦听,也可以一次性移除所有侦听 MouseManager.off("mouseenter",node); MouseManager.off("mouseleave",node); 或 MouseManager.offNode(node);