Disabling graphic element selection in VML and Internet Explorer

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:

http://i.imgur.com/O33MN.png

How can I turn off this behavior in IE?

Answer 1

It's hard to diagnose your problem on the information provided. IE VML is not very well supported and therefore pretty buggy.

In DojoX Drawing, I ran into a similar problem when drawing lines. VML has a bug where you can't drag and resize at the same time – but, you can drag and create at the same time, so I redraw the line, I don't transform it.

Further, I don't attach my click/drag events to the shape, I attach them to the overall main container, detect the id on the mousedown event, then track the mousemove and move the shape via doing a setTransform on the shape's container.

Essentially, because of the weak VML support, you have to be willing to try totally different things to get it to work.

Answer 2

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.