4

状況を説明するために、この例をここに示します：http: //jsfiddle.net/nubrF/40/

アニメーション化された要素のパスにマウスを置くと、ターゲット要素がマウスポインターの「下」を通過したときに、Firefox（IE、Chrome、Safariではない）でのみイベントが発生することがわかります。

私は実際に2つの質問があります：

  1. これは通常のブラウザの動作ですか？

  2. これらのイベントを何らかの方法でシミュレートし、ターゲット要素がマウスポインターの下を通過したときに通知を受け取るには、どの方法をお勧めしますか？

マウスのpageXとpageY、およびページ内の要素の位置についてはすでに考えましたが、このソリューションは複雑で、あまりきれいではないようです。

ご協力いただきありがとうございます。

4

1 に答える 1

5

はい、これは正常な動作です。それを回避する方法は、mouseleave / mouseenterを放棄し、mousemoveイベントをドキュメントにバインドすることです。そこから、ページ上のマウスポインターの位置と、アニメーション化された要素のwith（）とheight（）を含むoffset（）を取得します。mousemoveイベントから保存された最後のポイントがその領域内にある場合、マウスは要素内にあります。

アニメーションが更新されるたびにテストする必要があります。これは、アニメーションステップ関数を使用して実行できます。

例えば

function myAnimateStepFunc(e,fx) {
    var $e = $(fx.elem);
    var p = $e.offset();
    var isin = false;
    if(lastx >= p.left && lasty >= p.top) {        
        isin =(lastx < p.left + $e.width() && lasty < p.top + $e.height());           
    }

...

それで十分かもしれませんが、それを拡張して、アニメーション要素に向けて自分でmouseleave/mouseenterイベントをトリガーすることもできます。

マウスのlastxとlastyの位置は、アニメーションの含まれているdiv内だけでなく、ページ上で移動する場所で更新する必要があるため、mousemoveをページ全体にバインドする必要があることに注意してください。

于 2012-05-09T12:45:06.470 に答える