0

Facebook のような画像アップロード システムを構築しようとしています。画像にマウスを合わせると、画像を選択するためのボタン (実際の html ボタンではなく div) が表示されます。これまでのところ、jQuery の hover メソッドを使用しています。問題は、画像にカーソルを合わせるとボタンが表示されますが、ボタンにカーソルを合わせると、画像にカーソルを合わせていないと見なされ、ボタンが消えることです。もちろん、ボタンがなくなったので、もう一度画像にカーソルを合わせると、ボタンが再び表示されます。最終結果は、画像上でマウスを動かすと、この種のちらつき効果になります。

私はそれを回避する方法を理解できないようです。ボタン自体に別のホバー イベントを作成して、画像のホバー イベントを削除し、マウスアウトで置き換えることを試みましたが、画像のマウスアウト イベントが最初に発生するようで、何もしません。

私が考えることができる唯一のことは、setTimeout を使用することですが、これはずさんなようです。Facebook が同様のことを行っているのを見て、それを処理するための非常にクリーンな方法があると確信しています。

何かご意見は？ありがとう！

4

1 に答える 1

1

バブリングを処理するために hover() の代わりにmouseenter()を使用してみてください

mouseenter イベントは、イベントのバブリングを処理する方法が mouseover とは異なります。この例でマウスオーバーが使用された場合、マウス ポインターが内部要素の上に移動すると、ハンドラーがトリガーされます。これは通常、望ましくない動作です。一方、mouseenter イベントは、マウスが子孫ではなく、バインドされている要素に入ったときにのみハンドラーをトリガーします。したがって、この例では、マウスがアウター要素に入ったときにハンドラーがトリガーされますが、インナー要素にはトリガーされません。

于 2012-07-20T23:30:05.447 に答える