7

IEブラウザでSVG効果にRaphaelを使用すると問題が発生しました。オブジェクトの上にマウスを置くと、アニメーションは期待どおりに発生します。ただし、mouseoutでは、mouseoutアクションが呼び出されることはないため、オブジェクトはマウスオーバー状態のままになります。

過去に他の人がこの問題について不満を言っているのを見たことがありますが、私が見た唯一の解決策は、すべてのオブジェクトでマウスオーバーイベントを強制してすべての!=現在のオブジェクトを通常の状態に戻すことでした。私はかなりの数のオブジェクトを持っているので、一般的な「すべてをリセット」したくないので、誰かが提案できる代替案があるかどうか疑問に思います。私は、最後にトリガーされたマウスオーバーで最後のオブジェクトを変数に格納し、すべてのマウスオーバーでそれをリセットすることだけを考えていました。これは機能する可能性があります。

4

4 に答える 4

12

Raphael 2.0.2以降、RaphaelとInternet Explorer(すべてのバージョン)で問題が発生しました。ホバー中にトランスフォーム、、、.toFront()または.toBack()呼び出し元をリセットするなどのパスのさまざまな操作により、hover()ホバーインが無限にループしたり、ホバーアウトしたりする可能性があります。見逃してしまいます。

IEのマウスアウトhoverはほとんど正常に機能しますが、それがトリップして、a)説明するときにマウスアウトを無視し、b)コンソールを配置した場合にマウスオーバーイベントを再帰的にトリガーする可能性があることがいくつかあります。そこにログインすると、IE開発者ツールのコンソールが壊れて灰色になります...これにより、マウスアウトの認識も停止するように見えることがあります。

これがこれを引き起こす私が遭遇したものです:

  • 変換をリセットすると、要素がマウスの下から移動し、再適用して要素をカーソルの下に戻します。非IEは何も起こらなかったように続行し、正常に動作します。IEは上記のように異常終了します。
  • .toFront()および.toBack()-非IEは、移動された要素を同じXY位置にある同じ要素として認識し、IEは上​​記のように異常終了します。

このjsfiddleにはいくつかの観察とデモンストレーションがあります(さまざまなコメントを読んでコメントを外してください)。

ここでの適切な回避策は、たとえば'path.data(' hoverIn'、true);のようなフラグを設定することです。マウスアウト時に、または問題のある変換をチェックでon mouse in and 'path.data( 'hoverIn', false );ラップして、マウスアウトが発生するまで1回だけ発生するようにします。または、または何かの後のどこかに最後にホバーされたパスへの参照を保存し、このパスが最後にホバーされたパスでもある場合は、保存しないでください。.toFront()!path.data( 'hoverIn' )toFront()toFront()

于 2012-03-01T17:41:39.050 に答える
4

同じ問題が発生し(ホバー時に背景が変更されたリージョンのマップ)、IE9 / OperaのディールブレーカーはtoFront()メソッドでした。私はそれを削除しました、そしてそれはうまくいきます。

于 2012-10-24T10:49:52.890 に答える
2

この制限を回避するには、匿名関数内にコードを配置し、setTimeoutイベントハンドラー内で呼び出します。

于 2012-12-04T20:43:59.737 に答える
1

マウスアウトしようとしているオブジェクトの下(およびそれを含む)に長方形を背景として追加する場合、背景の長方形に別のホバーイベントハンドラーを追加することで、効果的にマウスアウト効果を得ることができます。

于 2012-06-07T16:52:20.693 に答える