3

私は奇妙な問題にぶつかりました。

jQuery 1.4.1 の mouseenter/mouseleave イベントは、マウスが動かされている場合に正しく発生しますが、大したことではありません。ただし、一部のブラウザーでは、カーソル自体は静的なままで、要素が animate() によって移動されている場合にバグが発生します。

したがって、次のようなコードを想像してください。

jQuery('somelement').bind(
{
   mouseenter: function(e) {
     log.debug("enter");
     $(this).animate({left: 9999}, 2000);
   },
   mouseleave: function() {
     log.debug("leave");
   }
});

マウスを要素の上にすばやく移動してから停止すると、ブラウザーによって異なる結果が得られます。

FF3.6、Safari 4、IE7: マウス自体が静止している場合でも、カーソルがアニメーション化された要素を離れると、期待どおりに mouseleave が発生しました。

IE6、IE8、Opera 9/10、Safari 3、Chrome: 要素がウィンドウの外にある場合でも、mouseleave は発生しません。マウスを少し動かすと、正しい mouseleave イベントがトリガーされます。

それを修正する方法はありますか？

4

1 に答える 1

0

残念ながら、mouseover、mouseleave、mouseover、および mouseout 関数はすべて、実際のオブジェクトではなく、マウスにバインドされているようです。これは、インラインの代替手段 onmouseout などを使用する場合にも当てはまります。

私の知る限り、あなたがやろうとしていることに対する優れた代替手段は実際にはありません。それが絶対に必要な機能である場合、これが私がそれを行う方法です。

  1. 要素の mouseenter ハンドラーを作成します。マウスが要素に入ると、mouseout と mousemove の両方をバインドします。
  2. mousemove イベントが呼び出されたら、そのイベント オブジェクトを使用して、マウスの x 位置と y 位置をグローバル変数に格納します。
  3. while ループで要素を移動するカスタム アニメーション関数を使用します。while ループ内で、ステップ 2 で保存した x 座標と y 座標から要素が移動したかどうかを確認します。
  4. その要素がこれらの x 座標と y 座標から移動した場合は、必要なことをすべて実行し、mousemove のバインドも解除します (そうしないと、不要なリソースが消費されます)。これは、ステップ 1 の mouseout が呼び出された場合に実行される関数でもある必要があります。

それが理にかなっていることを願っています。今日、もう少し時間があれば、フィドルの例を作成して、それがどのように機能するかを確認できるようにします。

于 2011-04-12T17:50:20.497 に答える