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

Question

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

https://i.sstatic.net/JRIh1.png

如何在 IE 中关闭此行为？

Answer 1

根据所提供的信息很难诊断您的问题。 IE VML 没有得到很好的支持，因此有很多错误。

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

此外，我不会将单击/拖动事件附加到形状，而是将它们附加到整个主容器，检测 mousedown 事件上的 id，然后跟踪 mousemove 并通过在形状容器上执行 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 上是必需的。

仍然存在一个小问题。在图形区域外按鼠标，然后将光标拖动到图形区域中，则会选择整个区域，或同时选择区域和图形元素。