在VML和Internet Explorer中禁用图形元素选择

Question

我有一个JavaScript应用程序，可让用户在绘图区域周围移动形状，而我碰巧正在使用Google Closure库。 在FF / Safari中，一切都很好。 在IE中，随着图形元素的移动，浏览器会同时选择它们（移动元素和其他元素），从而在某些元素周围以无法预测的方式显示彩色的虚线背景：

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

如何关闭IE中的这种行为？

Answer 1

根据提供的信息很难诊断出您的问题。 IE VML的支持不是很好，因此存在很多问题。

在DojoX绘图中，绘制线时遇到了类似的问题。 VML有一个错误，您不能同时拖动和调整大小–但是，您可以同时拖动和创建，因此我重新绘制了线条，但不进行变换。

此外，我不将单击/拖动事件附加到形状上，而是将它们附加到整个主容器上，检测mousedown事件上的id，然后通过在形状的容器上执行setTransform来跟踪鼠标移动并移动形状。

本质上，由于VML的支持较弱，因此您必须愿意尝试完全不同的方法才能使其正常工作。

Answer 2

经过一些试验，我找到了部分答案。

goog.events.Event类具有preventDefault方法。 只需处理图形元素上的MOUSEMOVE事件。 然后调用event＃preventDefault方法：

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();
});

在图形元素内单击，然后再拖动将不再选择圆。 同样，这仅在IE上是必需的。

一个小问题仍然存在。 在图形区域之外按下鼠标，然后将光标拖到图形区域中，将导致整个区域被选中，或者区域和图形元素都被选中。