アクセシビリティ
デベロッパーリソース

目次

ActionScript 3.0のイベント処理について

Eventメソッド

Eventオブジェクトに関連する便利なメソッドの一部を次に紹介します。

  • stopPropagation()
  • stopImmediatePropagation()
  • preventDefault()
  • isDefaultPrevented()

プロパティと同様に、Eventサブクラスには追加のメソッドがある場合があります。例えば、KeyboardEventおよびMouseEventインスタンスには、updateAfterEvent()メソッドもあります。このメソッドを使用すると、イベントの完了後に画面を再描画できます。

これらのEventメソッドが実行できる内容について次に説明します。

  • stopPropagation():バブルするイベントのイベントリスナー内で呼び出されると、現在の段階と後続の段階でイベントを受け取るはずであった残りのオブジェクトへのイベントの伝達を停止します(図6を参照)。

    stopPropagation使用時のイベントの経路の動作

    図6.stopPropagation使用時のイベントの経路の動作

  • stopImmediatePropagation():バブルするイベントのイベントリスナー内で呼び出されると、現在のオブジェクトと残りのオブジェクト内でのイベントの伝達を停止します(図7を参照)。これは、stopPropagationとよく似た動作ですが、stopPropagationでは現在のオブジェクト内での他のイベントの呼び出しは停止されない点が異なります(同じオブジェクト内で同じイベントをリッスンしているリスナーが複数存在する場合)。

    stopImmediatePropagation使用時のイベントの経路の動作

    図7.stopImmediatePropagation使用時のイベントの経路の動作

  • preventDefault():デフォルトの動作をキャンセルするために、キャンセル可能なイベントに使用します。
  • isDefaultPrevented():現在のリスナーまたはこのイベントに応答して呼び出されている前のリスナー内で、preventDefaultが現在のイベントに対して呼び出されているかどうかに応じて、trueまたはfalseを返します。

例4:コンテナ内の特定のイベントの無効化

前述のように、マウスイベントは、ActionScript 3.0内のすべての対話型オブジェクトに対して継承的に有効です。マウス動作を無効にするには、mouseEnabledプロパティをfalseに設定します。また、そのオブジェクトのすべての子に対してマウスイベントを無効にできる、mouseChildrenという表示オブジェクトコンテナ用の類似のプロパティもあります。mouseChildrenfalseに設定すると、表示オブジェクトコンテナ内のすべてのインスタンスに対して、マウスが有効になるのを効果的に防ぐことができます。

ただし、コンテナ内のオブジェクトのコレクションに対して特定のマウスイベントのみを無効にする場合は、別のアプローチを使用する必要があります。このような状況では、無効にするイベントをリッスンしているターゲットの親インスタンス内のイベントリスナーを使用して、このリスナーがそのイベントを伝達しないようにします。これにより、コンテナ内のオブジェクトに対応しているリスナーが呼び出されなくなります。

次の例では、コンテナウィンドウに2つのボタンを作成します。これらのボタンのクリックアクションは、コンテナの外部にある別のボタンから有効または無効に設定します。3番目の外部のボタンは、クリックイベントがキャプチャ段階で検出されたときコンテナがクリックイベントの伝達を停止するかどうかを判断するプロパティを設定します。

Flash CS3 Professional ActionScript 3.0プレビューの使用

  1. 新しいFlashドキュメントを作成します。
  2. Buttonという名前の新しいボタンシンボルを作成します。
  3. このボタンシンボルに、up、overおよびdownの一意のボタン状態を指定します。
  4. Windowという名前の新しいムービークリップシンボルを作成します。
  5. Windowムービークリップ内に、ウィンドウを描画します(単純な長方形でかまいません)。
  6. ウィンドウグラフィックスの上の新しいレイヤーに、前の手順で作成した2つのボタンシンボルインスタンスを追加します。ボタンインスタンスの名前を指定します。最初のボタンインスタンスの名前をbutton1、2番目のボタンインスタンスの名前をbutton2とします。
  7. メインタイムラインにWindowムービークリップとButtonボタンのインスタンスがまだ存在しない場合は、追加します。Windowインスタンスの名前をwindow、ボタンインスタンスの名前をenablerとします(図8を参照)。

    2つのボタンインスタンスが内側にあり、「Enabler」ボタンが外側にあるWindowムービークリップ

    図8.2つのボタンインスタンスが内側にあり、「Enabler」ボタンが外側にあるWindowムービークリップ

  8. 次のタイムラインスクリプトをフレーム1に追加します。

    var clickEnabled:Boolean = true;
          
    function clickHandler(event:MouseEvent):void {
       trace("click: " + event.currentTarget.name);
    }
    
    function toggleEnabled(event:MouseEvent):void {
       clickEnabled = !clickEnabled;
    }
    
    function disableClickHandler(event:MouseEvent):void {
       if (clickEnabled == false) {
          event.stopPropagation();
       }
    }
    
    window.button1.addEventListener(MouseEvent.CLICK, clickHandler);
    window.button2.addEventListener(MouseEvent.CLICK, clickHandler);
    window.addEventListener(MouseEvent.CLICK, disableClickHandler, true);
    enabler.addEventListener(MouseEvent.CLICK, toggleEnabled);
    

Flex 2の使用

  1. 新しいFlex MXMLドキュメントを作成します。
  2. 次のMXMLを使用します。

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                applicationComplete="initApp()">
       <mx:Script>
          <![CDATA[
             public var clickEnabled:Boolean = true;
          
             public function clickHandler(event:MouseEvent):void {
                trace("click: " + event.currentTarget.name);
             }
             
             public function toggleEnabled(event:MouseEvent):void {
                clickEnabled = !clickEnabled;
             }
             
             public function disableClickHandler(event:MouseEvent):void {
                if (clickEnabled == false) {
                   event.stopPropagation();
                }
             }
             
             public function initApp():void {
                button1.addEventListener(MouseEvent.CLICK, clickHandler);
                button2.addEventListener(MouseEvent.CLICK, clickHandler);
                container.addEventListener(MouseEvent.CLICK, disableClickHandler, true);
                enabler.addEventListener(MouseEvent.CLICK, toggleEnabled);
             }
          ]]>
       </mx:Script>
       
        <mx:Panel width="250" height="250" layout="absolute" id="window">
            <mx:Button x="30" y="25" label="Button" id="button1"/>
            <mx:Button x="30" y="55" label="Button" id="button2"/>
        </mx:Panel>
        <mx:Button label="Enabler" id="enabler"/>
       
    </mx:Application>
    

ムービーをテストし、「Enabler」ボタンがclickEnabled変数を使用して、コンテナ内のボタンによるクリックイベントの受け取りを無効または有効にする様子を確認します。この方法では、clickEnabled変数はクリックイベントのみを無効にするので、roll overなどのマウスイベントはウィンドウ内のボタンに対して一貫して機能します。roll overマウスイベントは、mouseChildrenプロパティがコンテナに対してfalseに設定されている場合には機能しません。