Question

I have a JavaScript application that lets users move shapes around a drawing area, and I happen to be using the Google Closure library. In FF/Safari all is good. In IE, as graphic elements are moved, they get selected by the browser (both the moving element and other elements), showing colored dotted background around some elements in unpredictable ways:

https://i.stack.imgur.com/JRIh1.png

How can I turn off this behavior in IE?

Answer 1

After some experimentation, I found a partial answer.

The goog.events.Event class has a preventDefault method. Simply handle the MOUSEMOVE event on the graphics’ element. Then call the event#preventDefault method:

var element = ... // some element
var graphics = goog.graphics.createGraphics('400', '300');

var fill = new goog.graphics.SolidFill('#00ff00', 0.5);
var stroke = new goog.graphics.Stroke(1, 'black');

graphics.drawEllipse(60, 60, 10, 10, stroke, fill);
graphics.drawEllipse(90, 90, 10, 10, stroke, fill);

graphics.render(element);

goog.events.listen(graphics.getElement(), goog.events.EventType.MOUSEMOVE, function(e) {
  e.preventDefault();
  e.stopPropagation();
});

Clicking inside the graphics element, then dragging no longer selects the circles. Again, this is only necessary on IE.

One minor problem remains. Pressing the mouse outside of the graphics area, then dragging the cursor into the graphics area results in the entire area being selected, or both the area and graphical elements.