Mouse click event not working

Mouse click event not working
0.0 0



I am developing a Cocos2d-HTML5 based game. I am trying to handle mouse click event in my code like below. This is added in ‘cc.Layer.extend’ class. When i tested the code, it is not detecting the mouse click event, it is doing nothing when i click through mouse. Please suggest what is wrong in my code and how can i handle mouse click event in the layer created for a scene?

Approach 1 :
var closemenuItem = cc.MenuItemImage.create(
function () {
closemenuItem.setAnchorPoint(cc.p(0.5, 0.5));

var menu = cc.Menu.create(closemenuItem);
this.addChild(menu, 1);
closemenuItem.setPosition(cc.p(size.width - 20, 20));
Approach 2:
var item1 = new cc.MenuItemFont.create(“FamilyRoomButton”,this,this.playSound);
var menu = cc.Menu.create(item1);
menu.setPosition(new cc.Point(0,0));

alert(“Play Works!”);

Both are not working.


Run the Sys/Capabilities test in cocos2d-html5 2.1.3 and update what you see in the browser console.


Hi S G, Thanks for the reply. Could you say where can i find this test?


We tried running index.html from the following path in our machine,
on different browsers such as IE (9.0 v), Firefox (20.0 v) and Google Chrome (v. 15.0), but we observed “Loading please wait…” screen on all the browsers. Pls find the screenshot image for ref.


The tests are under samples directory of a typical cocos2d-html5 download, alongside the demo games directory. Firstly, you have to setup a local webserver to serve the files off the filesystem, since xhr requests are not served directly. If you are on windows you can install XAMP or any other webserver as mentioned in the setup wiki

In the meanwhile, you can run these tests online from
Checkout event test for mouse, the console should report the coordinates of mouse click on up and down.

In v2.1.3, the test is something like this

if( ‘mouse’ in sys.capabilities ) {
} else {
cc.log(“MOUSE Not supported”);


Yes, we have been looking at the same test samples directory and we installed XAMP before starting our development. I see your online test link is for iOS related? We are working on html5 web app development now. We don’t have any problem now on finding our Mouse capabilities. We are facing issue on handling mouse click event for a particular sprite image/menu item, currently the click event is happening to the entire layer instead of a particular sprite image or menu item created. Please let us know if you can help on this. This is our updated code below.

var MyMainScene = cc.Scene.extend({
onEnter:function () {
var frontLayer = new MyMainSceneLayer ;
var buttonLayer = new MyMainLayerButton ;
buttonLayer .init;
var MyMainLayerButton = cc.Layer.extend {
var selfPointer = this;

var size = cc.Director.getInstance().getWinSize();

var lazyFamilyButtonLayer = cc.Layer.create();

this.spriteFamilyIcon = cc.Sprite.create(“res/Button.png”);
this.spriteFamilyIcon.setPosition(cc.p(size.width/20+375, 20));

return true;
onMouseUp:function (event) {
// ISSUE: Mouse click event is being called wherever we click on top of the main layer, instead of this particular button layer?


Hi Sharmil,

You may check my answer, dealing with conceptual clarity of touch event handling in cocos2d architecture here


Hi SG, I need for cocos2d-html5 not for cocos2d-iPhone.