次のように、2 つの正方形があるステージがあるとします。
黄色の四角形を最初は非表示にしたいとします。マウス カーソルが赤い四角形の境界内にある限り、黄色の四角形は表示され、マウス カーソルが外にある限り表示されます。赤い四角の境界線 - 黄色の四角が隠されること。
直感的なアプローチは、次のように書くことです。
inSqr.visible = false;
outSqr.addEventListener (MouseEvent.ROLL_OVER,sqrOver);
outSqr.addEventListener (MouseEvent.ROLL_OUT,sqrOut);
function sqrOver(e:MouseEvent) {
inSqr.visible = true;
}
function sqrOut (e:MouseEvent) {
inSqr.visible = false;
}
ただし、このコードでは、マウスカーソルを黄色の四角内に移動するたびに、明らかに、赤の四角のROLL_OUTとしてカウントされます-したがって、sqrOut関数がトリガーされます-黄色の四角が消え、黄色の四角が一度そこにはありません - カーソルは再び赤い四角の境界内に突然入ります- そのため sqrOver 関数が呼び出されます - 黄色の四角の可視性を取り戻します - sqrOut などをトリガーします。 mouse-cursr は彼の上にあります: 黄色の四角が消えて、何度も何度も再表示されます。
これに対する可能な「修正」は、カーソルが黄色の内側にある間に赤色のロールアウト イベントのリスナーを削除し (黄色の内側にある場合は、確実に赤色の内側にもある)、それが外れたときに元に戻すことです。 、これを上記のコードに追加することにより:
inSqr.addEventListener (MouseEvent.ROLL_OVER,insqrOver);
inSqr.addEventListener (MouseEvent.ROLL_OUT,insqrOut);
function insqrOver(e:MouseEvent) {
if (outSqr.hasEventListener (MouseEvent.ROLL_OUT)) {
outSqr.removeEventListener(MouseEvent.ROLL_OUT,sqrOut);
}
inSqr.visible = true;
}
function insqrOut(e:MouseEvent) {
if (!outSqr.hasEventListener (MouseEvent.ROLL_OUT)) {
outSqr.addEventListener(MouseEvent.ROLL_OUT,sqrOut);
}
}
これは機能します。しかし、それは面倒です。赤い四角の境界内にあるすべてのオブジェクトに対してこれを行う必要があります。その結果、長いコードと多くのイベント リスナーが発生し、継続的なリスナーの登録と登録解除が行われます。
数年前、誰かが私にこのテクニックを提案しました:
outSqr.addEventListener (Event.ENTER_FRAME,hoverCheck);
function hoverCheck (e:Event) {
if (e.currentTarget.hitTestPoint(stage.mouseX,stage.mouseY,true)) {
inSqr.visible = true;
}
else {
inSqr.visible = false;
}
}
これは機能する簡単な短いコードです。ただし、プロジェクトで ENTER_FRAME イベントを実際に使用する必要がない場合は、ヒット テストを繰り返し実行するための不要なオーバーヘッドと CPU サイクルが作成されます。また、赤い四角がステージ全体を覆っている場合 (ステージと同じ寸法)、問題が発生します (機能しません)。
これを達成するためのシンプルでエレガントな方法を知っている人はいますか?