HTMLコントロールのリンクイベント

Action Script に古くから在る、TextField には flash.events.TextEvent.LINK というイベントがあります。

TextField.htmlText に設定したリンクタグのクリックを直接イベントとして拾う事が出来るのです。


    ～
    var tf:TextField = new TextField();
    tf.htmlText = "<a href='event:hongeee'>ほんげえぇ！</a>";
    tf.addEventListener(TextEvent.LINK, onLink);
    ～
function onLink(e:TextEvent):void
{
    trace(e.text);
}

これで、表示されたリンクをクリックすると、「hongeee」とトレースされます。

HTMLLoader リンクイベント

TextField にあるのだから、flex の HTMLコントロール、HTMLLoader クラスに該当のメソッドなりが有って当然ですよね。
しかし・・・どちらにも、リンククリックに関するイベントが在りません。
→HTMLLoader参照：http://livedocs.adobe.com/flex/3_jp/langref/flash/html/HTMLLoader.html
→HTML参照：http://livedocs.adobe.com/flex/3_jp/langref/mx/controls/HTML.html

いきなり詰まって・・・居ては話が進みませんので、検索の結果から。
→参考：http://www.saturn.dti.ne.jp/~npaka/flash/apollo10/DOMControlEx/index.html

HTMLからDOM操作をし、「DOMオブジェクトに直接イベントを関連付ける」必要があるようです。

サンプルコード（一部）


<mx:Script>
    <![CDATA[
    import flash.events.Event;
    private function init():void
    {
        html.htmlText = '<html><body><a href="#" id="AAANPANda!">あんぱんだ！</a></body></html>';
        html.addEventListener(Event.COMPLETE, onComplete);
    }
    private function onComplete(e:Event):void 
    {
        html.htmlLoader.window.document.getElementById("AAANPANda!").onclick = onLink;
    }
    private function onLink(e:*):void
    {
        trace(e);
    }
    ]]>
</mx:Script>
<mx:HTML id="html" width="100%" height="100%"/>

Event.COMPLETE でレンダリングの完了を待たないと、html.htmlLoader.window.document にアクセスできません。
ヌルぽ...ガッ！のコンボを食らいます。

このサンプルを実行すると、表示されたのは [object MouseEvent] となりました。
マウスのクリックがそのまま発生しているようですね。「getElementById().onclick」にイベント設定している辺りからも容易に想像できます。

調べてみると、HTML 内のJava Script なども、かなり直接的に操作できるようですね。
→参照：http://help.adobe.com/ja_JP/AIR/1.1/devappsflex/WS5b3ccc516d4fbf351e63e3d118666ade46-7ed4.html

ナニ？イベント

イベントハンドラを、このように記述し、flash.events.MouseEvent をインポート。


private function onLink(e:MouseEvent):void
{
    trace(e);
}

コンパイルも問題なく、実行！

すると、エラーダイアログは出ませんが、トレースに明らかにエラーが出力されています。

[Fault] exception, information=TypeError: Error #1034: Type Coercion failed: cannot convert __HTMLScriptObject@44c7809 to flash.events.MouseEvent.
TypeError: Error #1034: Type Coercion failed: cannot convert __HTMLScriptObject@44c7809 to flash.events.MouseEvent.

おいィ？ MouseEvent が MouseEvent に変換できないオレの怒りが烏骨鶏（ry

trace では、[object MouseEvent] と表示されていましたが、これを trace(typeof e) で確かめてみると・・・
何故か object 以外が帰ってきません。

このままでも作業は進められるのですが、悔しいので以下のコードで中身表示してみました。


private function onLink(e:Object):void
{
    trace("------------------");
    for (var k:* in e)
    {
        trace(k + "=" + e[k]);
    }
    trace("------------------");
}

結果：


------------------
toElement=[object HTMLImageElement]
button=0
y=50
relatedTarget=null
clientX=71
offsetX=67
altKey=false
screenX=382
shiftKey=false
clientY=50
x=71
ctrlKey=false
screenY=240
metaKey=false
offsetY=46
fromElement=null
dataTransfer=null
which=1
layerX=71
keyCode=0
charCode=0
view=[object DOMWindow]
pageY=50
layerY=50
pageX=71
detail=1
timeStamp=1264064494194
bubbles=true
cancelBubble=false
srcElement=[object HTMLImageElement]
cancelable=true
eventPhase=3
clipboardData=undefined
returnValue=true
target=[object HTMLImageElement]
type=click
currentTarget=
initMouseEvent=function initMouseEvent() {
    [native code]
}
initUIEvent=function initUIEvent() {
    [native code]
}
stopPropagation=function stopPropagation() {
    [native code]
}
KEYDOWN=256
FOCUS=4096
DBLCLICK=128
CLICK=64
MOUSEOVER=4
MOUSEOUT=8
preventDefault=function preventDefault() {
    [native code]
}
KEYPRESS=1024
initEvent=function initEvent() {
    [native code]
}
MOUSEDRAG=32
MOUSEDOWN=1
SELECT=16384
BUBBLING_PHASE=3
DRAGDROP=2048
BLUR=8192
MOUSEUP=2
MOUSEMOVE=16
CAPTURING_PHASE=1
CHANGE=32768
AT_TARGET=2
KEYUP=512
------------------

なにやらパラメータやら関数やら、ズラズラ表示されてしまいました。
判る人が見れば判ると思いますが、これは Java Script のオブジェクトです。

つまり、Java Script の MouseEvent が Action Script の MouseEvent に変換できないとエラーが出ていたのでした。

getElementsByName

この際なので、もうチョッと調べてみる。
Java Script での DOM操作における getElementsByName は、関数の名前からも、対象を複数返します。
この複数のエレメントの取得の具体的記述は、このようになるようです。

サンプルコード（一部）


<mx:Script>
    <![CDATA[
    import flash.events.Event;
    private function init():void
    {
        html.htmlText = '<html><body><ul>'
        +   '<li><a href="#" name="link">マツケンサンバ</a></li>'
        +   '<li><a href="#" name="link">お嫁サンバ</a></li>'
        +   '<li><a href="#" name="link">お父サンバ</a></li>'
        +   '<li><a href="#" name="link">NISSANバ</a></li>'
        +   '</ul></body></html>';
        html.addEventListener(Event.COMPLETE, onComplete);
    }
    private function onComplete(e:Event):void 
    {
        var items:Object = htmlLoader.window.document.getElementsByName("link");
        trace(items);
        trace("-------------------------");
        for (var t:* in items)
        {
            trace("[" + t + "]=" + items[t]);
        }
    }
    ]]>
</mx:Script>
<mx:HTML id="html" width="100%" height="100%"/>

結果：


[object NodeList]
-------------------------
[0]=about:blank#
[1]=about:blank#
[2]=about:blank#
[3]=about:blank#
[length]=4
[item]=function item() {
    [native code]
}

これも、Java Script の NodeList オブジェクトである事を示しています。
この結果から、以下のようにすれば、それぞれのリンクからのイベントを設定する事が出来ます。

コード：変化と追加のあった部分のみ。


private function onComplete(e:Event):void
{
    var items:Object = htmlLoader.window.document.getElementsByName("link");
    for (var i:int = 0; i &lt; items.length; i++)
    {
        items[i].onclick = onLink;
    }
}
private function onLink(e:Object):void
{
    trace(e.toElement.innerText);
}

実行すると、クリックしたリンクのテキストがトレースされます。

HTMLコントロールのリンクイベント

HTMLLoader リンクイベント

ナニ？イベント

getElementsByName

カテゴリ:

タグ:

関連記事:

トラックバック(0)

コメントする

検索

カテゴリ

このブログ記事について

HTMLコントロールのリンクイベント

HTMLLoader リンクイベント

ナニ？イベント

getElementsByName

カテゴリ:

タグ:

関連記事:

トラックバック(0)

コメントする

検索

カテゴリ

アーカイブ

タグクラウド

このブログ記事について