0

So, having a lot of fun with HTML5 Canvas gaming. One issue, however, is if I am using DOM elements in addition to the canvas elements, clicking and dragging on the canvas will highlight and "select" DOM elements. A subsequent click operation will start to "drag" the DOM elements around instead of registering to the Canvas.

It's EXTREMELY annoying, and I cannot find a good way to prevent it. Is there a way to make DOM elements "not highlight-able" as it were? Anyone else having this issue?

Addenda: The game is a shooter, so you could hold the mouse click down to keep shooting. But your health and points are stored inside DOM elements. I could render the score/health to the canvas, but it was just faster to do it to a DOM element.

Daniel Gast
  • 181
  • 13
  • 1
    css rules to stop highlighting: http://stackoverflow.com/a/4407335/685404 ,apply this css to the canvas :) – Josh Mc Apr 09 '13 at 03:09

1 Answers1

2

In your mousedown/click event handlers, add event.preventDefault() / return false.

example

window.addEventListener('click', function(e) {
    e.preventDefault();
    return false;
}, false);
Jarrod
  • 9,349
  • 5
  • 58
  • 73