Detecting when a user drags over an adcontrol in a HTML5/Javascript app?

Question

Hi I developed a game using Construct2 and included an AdControl inside main html page that came with the exported project. Now I noticed when you drag from the game canvas onto the ad and release, it never actually releases the touch. My game is dependent on a particular touch so I actually need that touch to reset if the user stops touching the screen. Am I missing something here, or is there maybe a workaround for this issue? I tried out the same thing in C#, using a WebBrowser control and I didn't experience the same issue.

I have tried a few things like HTML fragments and separating the div from the canvas with margins but it always acts the same way. I also tried to include the ad using a Windows Runtime Component but it doesn't look like it allows you to pass UI elements like the AdControl. Does anyone have some suggestions. Thanks.

Answer 1

Here is a working example which releases the touch when the hand is moved over the ad : http://jsfiddle.net/ChaitanyaMunipalle/jn3kZ/

You can see all the touch events below the canvas in this jsfiddle.

Check HammerJs for drag, release and other touch gestures. You can use touch events like normal jquery events like

$('#canvasId').on('dragstart drag dragend release ....',callback);

Answer 2

Some possibly related problem and solutions.

AdControl takes control over Focus - two possible solutions.

1. try to set IsEnabled property to false.

2. Found a slightly more effective workaround (which lets you leave the AdControl fully enabled).

   1. Create a Boolean field to called "_advertRefreshed".
   2. During ApplyTemplates hook the AdControl.Refreshed event, setting the _advertRefreshed true.
   3. Add a OnLostFocus event which implements the logic "if current focus is WebView and _advertRefreshed is true set focus back to original, then following this test always set _advertRefreshed false again".

KeyPress swallowed by AdControl? - a discussion on the issue and confirmation on solution #1 above.

Microsoft AdControl stealing focus - Windows 8 MonoGame

Answer 3

I'd need to see your code to give you the best answer possible, but this problem is fairly common.

If you have a setup like this (using jQuery for concept demonstration):

var mDown = false;

$("#myDiv").mouseDown(function(){
    mDown = true;
}).mouseMove(function(e){
    if (mDown)
       // do stuff
}).mouseUp(function(){
    mDown = false;
});

What happens is, if you mousedown inside of the div, but mouseup outside of it, the flag is never cleared because that div never receives the mouseup event.

What you need to do instead is attach the mouseup event to the window or document:

$(window).mouseUp(function(){
    mDown = false;
});

It will then clear its "state" regardless of where you release the mouse button.