Mouse Events out of canvas?

Hie,
I have draggable sprites and if i drag the sprite to the boundary and if i release my mouse outside the canvas the mouseup event is not being called.I know it will not.is there a way to end the event and set my sprite to original position.
We are wrking on games for kidas so keeping on mind the kids IQ level.If he releases the mouse out side the canvas the sprite is getting stucked.

in touches we have onTouchesEnd just like do we have any function which does the same.

Hi, Abhiram

Normally, we have already occupied this event for you in our engine, the onTouchesEnd event callback will be triggered once your mouse moved out of the canvas element. Can you show us how you handle the event?

Huabin

I have a set of sprties and iam using html 5 java script engine where for desktops touch events are not enabled.So Iam dragging my sprite to the boundary of canvas and releasing the mouse outside the canvas.So apart from onTouchsEnd is there any thing for Mouse Events which triggers when mouse is out of canvas and releases there.

I was unable to handle the event.

onMouseDragged:function(event)
{
var location = event.getLocation();
var newX = 0,newY = 0;
cc.log(“Mouse dragged x is” location.x);
cc.log;
newX = location.x;
newY = location.y;
var leftBoundary = 10;
var rightBoundary = 1020;
var bottomBoundary = 10;
var upperBoundary = 760;
this.sprite = this.getChildByTag;
var halfheight = this.sprite.getContentSize.height/5;
var halfwidth = this.sprite.getContentSize.width/5;
cc.log;
cc.log;
if < leftBoundary)
{
newX = leftBoundary
halfwidth/5;
cc.log(“newx is” newX);
}
else if > rightBoundary)
{
newX = rightBoundary - halfwidth/5;
cc.log;
}
else
{
newX = location.x;
cc.log;
}
if < bottomBoundary)
{
newY = bottomBoundary
halfheight/10;
cc.log(“newy is” +newY);
}
else if((location.y + halfheight > upperBoundary))
{
newY = upperBoundary - halfheight/10;
cc.log(“newy is” +newY);
}
else
{
newY = location.y;
cc.log(“newy is” +newY);
}
if(this.childId == TAG_WATERJUG)
{
this.sprite = this.getChildByTag(this.childId);
this.sprite.setPosition(newX,newY);
}

this is my mouse dragged event.

In fact, I rechecked our mouse dispatcher code, you need only onMouseDragged handler. The dispatcher listen to the mouse down and up event for all document, it will set a flag for mouse down. And the onMouseDragged handler will be called only when the flag is up.
So normally, it won’t act like you described, you can test our MoonWarriors test case in samples/games/MoonWarriors, or visit this page: http://www.cocos2d-x.org/MoonWarriors/index.html
This game uses onMouseDragged to detect mouse drag event for moving the ship. You can see if you drag your mouse out of scene and release it, when your mouse reenter the scene, it will stop to follow the mouse.
Sorry that I don’t have a hint for why it happened to you

Huabin

My question is not about the mouse down event.If I drag the sprite to the boundary and release my mouse out side the canvas the sprite should go to the previous position.The MouseUp event is not being called if i release the mouse out side the canvas instead the sprite is stucked to the boundary of canvas.Is there a way to end the mouse event as soon as the cursor leaves the canvas.How should an event get triggered when mouse pointer is out of canvas.Is there any dispatcher for the same?

Hi, I may found the problem you describe, did you use the touch mode cc.TOUCH_ONE_BY_ONE ?
We have an issue on this mode that the onTouchEnded don’t get called while mouse release outside the canvas.
If you can try the mode cc.TOUCH_ALL_AT_ONCE, the onTouchesEnded function should get called while mouse release outside the canvas.

I will try to fix the bug on mode one by one, meanwhile, could you test the other mode and tell me the result?
Thank you

Huabin

Hie,
Iam extremely sorry for the delay as i was occupied all the days couldnt check it.yes its working for ontouchesend.also I have this doubt if we implement ontouches events the mouse will also consume them with out the need of mouse events right?

Hi,

Sorry I don’t understand what did mean by the question. But the issue about TOUCH_ONE_BY_ONE mode is because this mode swallows touches automatically, so I added an option to setTouchEnabled(enabled, swallow) function. If you set the swallow to false, it should work.
But this option will only be available in the next stable release, or if you want to use it now, you need to update to the develop branch of cocos2d-html5.

The pull request that solve the problem: https://github.com/cocos2d/cocos2d-html5/pull/1529

Huabin