2

私は JavaScript でいくつかの実験を行っており、4 つの項目のリストが水平方向に表示され、各リスト項目にはonmouseoverandonmouseoutイベントが割り当てられています。

各アイテムのonmouseoverイベントは、間隔を使用して時間の経過とともにアイテムの高さを増加させる関数を実行します。

各アイテムのoutmouseoverイベントは関数を実行し、別の間隔を使用して時間の経過とともにアイテムの高さをデフォルト値まで減らします。

次のシナリオで機能しています。onmouseoverリスト項目に対してトリガーすると、高さが期待どおりに増加し、リスト項目からマウスを離すと、高さが期待どおりに減少します。

ただし、問題は、次のシナリオでは機能しないようです。onmouseoverリスト項目に対してトリガーすると、高さが期待どおりに増加しますが、項目が元のサイズに戻る前onmouseoverに別のリスト項目に対して別のイベントをトリガーすると、前のリスト項目の関数の実行が終了していません。onmouseout

詳細が不足している場合は申し訳ありません。明らかに、私は物事を説明するのが非常に下手です....ソースコードへのリンクと、コードをテストして何が起こっているかを確認できるサイトがあります。

たぶん私は思ったほどJavaScriptの知識がないので、解決策や修正は素晴らしいですが、なぜこれが起こっているのかについてのアドバイスや何らかの説明を喜んで受け入れます.

最初は、複数のインターバル タイマーを同時に実行することはできないと考えていましたが、いくつかの調査の結果、実行できることがわかりました。だから今私はそれがonmouseoverとonmouseoutイベントの間の競合であるかどうかを考えています。

アドバイス、ガイダンス、または解決策をいただければ幸いです。


ソース: https://docs.google.com/open?id=0B6XLOOGyKVdWVkpSUklmMVI5QUk
テスト サイト: http://www.play-hookey.com/htmltest/
(その Google ドキュメントの内容をコピーして、html テキスト領域に貼り付けるだけです)サイトで私が話していることを確認してください）

4

1 に答える 1

3

あなたのコード：

icon.onmouseover = function(){ enlarge(this, icon.ID); };
icon.onmouseout = function(){ reduce(this, icon.ID); };

正しいコード：

icon.onmouseover = function(){ enlarge(this, this.ID); };
icon.onmouseout = function(){ reduce(this, this.ID); };

何が起こったのか：イベントを関数にバインドし、それに変数を渡しました。各forループの後で、その関数変数を再定義しました（つまり、最後に、icon.ID = 3）。これは、同じicon.ID=3を使用する関数と呼ばれるすべてのイベントを意味します。

私はそれが理にかなっていることを願っています...

于 2012-10-10T05:17:41.713 に答える