我有一个 JavaScript 应用程序,可以让用户在绘图区域周围移动形状,而我碰巧正在使用 Google Closure 库。在 FF/Safari 中一切都很好。在 IE 中,随着图形元素的移动,它们会被浏览器(移动元素和其他元素)选中,以不可预知的方式在某些元素周围显示彩色虚线背景:
如何在 IE 中关闭此行为?
我有一个 JavaScript 应用程序,可以让用户在绘图区域周围移动形状,而我碰巧正在使用 Google Closure 库。在 FF/Safari 中一切都很好。在 IE 中,随着图形元素的移动,它们会被浏览器(移动元素和其他元素)选中,以不可预知的方式在某些元素周围显示彩色虚线背景:
如何在 IE 中关闭此行为?
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.
经过一些实验,我找到了部分答案。
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 上是必需的。
一个小问题仍然存在。在图形区域外按下鼠标,然后将光标拖入图形区域会导致整个区域被选中,或者区域和图形元素都被选中。