I am trying to write a simple HTML 5 app for Windows Phone 7/7.5. I have a HTML5 page with a canvas almost the size of the screen. When I click/tap on the screen, the canvas is selected. I don’t want that behavior, but I still want to be able to click/tap on various controls. Is there a way to not have that behavior? Below is the link of a screenshot showing the effect.

I tried to remove that behavior using CSS in the body. Nothing has worked so far.
body {
/* disable selections / cut copy paste actions */
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
/* disable callout, image save panel on long press */
-webkit-touch-callout: none;
/* "turn off" link highlight, good for custom pressed states */
-webkit-tap-hightlight-color: transparent;
}
Thank you in advance for the help!
Martin mentioned that the following example does not exhibit the highlight behavior:
http://ie.microsoft.com/testdrive/Mobile/Performance/HamsterDanceRevolution/Default.html
So I did some digging and noticed that the above example attaches events to the window object. I got it down to the following three line modifications of the file “kinetic-v3.8.4.js”:
(1)
this.container.addEventListener(baseEvent, handler, false);
–>
window.addEventListener(baseEvent, handler, false);
(2)
this.container.addEventListener(‘mousedown’, function(evt)
–>
window.addEventListener(‘mousedown’, function(evt)
(3)
this.container.addEventListener(‘mousedown’, function(evt)
–>
window.addEventListener(‘mouseup’, function(evt)
After this modification, the canvas still reacts and the unwanted highlighting is gone.
Regards,
Luis