ユーザーが描画領域内で図形を移動できるJavaScriptアプリケーションがあり、たまたまGoogleClosureライブラリを使用しています。FF/Safariではすべてが良好です。IEでは、グラフィック要素が移動されると、ブラウザによって選択され(移動要素と他の要素の両方)、予測できない方法で一部の要素の周囲に色付きの点線の背景が表示されます。
IEでこの動作をオフにするにはどうすればよいですか?
ユーザーが描画領域内で図形を移動できるJavaScriptアプリケーションがあり、たまたまGoogleClosureライブラリを使用しています。FF/Safariではすべてが良好です。IEでは、グラフィック要素が移動されると、ブラウザによって選択され(移動要素と他の要素の両方)、予測できない方法で一部の要素の周囲に色付きの点線の背景が表示されます。
IEでこの動作をオフにするにはどうすればよいですか?
提供された情報で問題を診断するのは困難です。IE VMLはあまりサポートされていないため、かなりバグがあります。
DojoX描画では、線を描画するときに同様の問題が発生しました。VMLには、ドラッグとサイズ変更を同時に行うことができないというバグがありますが、ドラッグと作成を同時に行うことができるため、線を再描画し、変換しません。
さらに、クリック/ドラッグイベントをシェイプにアタッチせず、メインコンテナー全体にアタッチし、mousedownイベントでIDを検出してから、マウスの移動を追跡し、シェイプのコンテナーでsetTransformを実行してシェイプを移動します。
基本的に、VMLのサポートが弱いため、VMLを機能させるには、まったく異なることを試してみる必要があります。
いくつかの実験の後、私は部分的な答えを見つけました。
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でのみ必要です。
1つの小さな問題が残っています。グラフィックス領域の外側でマウスを押してから、カーソルをグラフィックス領域にドラッグすると、領域全体、または領域とグラフィック要素の両方が選択されます。