讓 Flex 內不可選擇的文字超連結生效

讓 Flex 內不可選擇的文字超連結生效

在 Flash 內，不可選擇的 (unselectable) TextField 仍可保留 HTML 超連結功能
但是 Flex 卻不行
查文件上也有寫到 Label.selectable

其實不光是 Label, Text 組件不行
任何一個在 Flex App 下的 unselectable TextField 超連結都會失效
這樣需要用到不可選擇的超連結文字時就很不方便

Flex 超連結失效測試程式：

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

   fontSize="12" backgroundColor="#F0F0F0">

 <mx:Script>

  <![CDATA[

   import flash.events.*;

   import mx.managers.FocusManager;

   

   public function onTxtLink(evtObj:Event):void{

    textArea.text += evtObj + "/n";

   }

  ]]>

 </mx:Script>

 <mx:Label selectable="false" link="onTxtLink(event)">

  <mx:htmlText>

   <![CDATA[Flex Label : <a href='event:linkEvent'>Link Event Text</a> | ]]>

   <![CDATA[<a href='http://ticore.blogspot.com' target='_blank'>Ticore's Blog</a>]]>

  </mx:htmlText>

 </mx:Label>

 

 <mx:Text selectable="false" link="onTxtLink(event)">

  <mx:htmlText>

   <![CDATA[Flex Text : <a href='event:linkEvent'>Link Event Text</a> | ]]>

   <![CDATA[<a href='http://ticore.blogspot.com' target='_blank'>Ticore's Blog</a>]]>

  </mx:htmlText>

 </mx:Text>

 

 <mx:Button label="Clear Log" click="textArea.text = '';" />

 <mx:TextArea id="textArea" width="100%" height="100%" />

</mx:Application>

於是花了不少力氣去追蹤原因
終於發現是 Flex 內的 FocusManager 刻意攔截下 unselectable TextField Focus 事件
這也間接造成超連結失效

既然知道問題是出在 FocusManager 上
問題就比較好處理了
以下是變通方式，讓 FocusManager 短暫失效一下~

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

   fontSize="12" backgroundColor="#F0F0F0">

 <mx:Script>

  <![CDATA[

   import flash.events.*;

   import mx.managers.FocusManager;

   

   public function onTxtLink(evtObj:Event):void{

    textArea.text += evtObj + "/n";

   }

  ]]>

 </mx:Script>

 <mx:Label selectable="false" link="onTxtLink(event)"

   rollOver="focusManager.deactivate()" rollOut="focusManager.activate()">

  <mx:htmlText>

   <![CDATA[Flex Label : <a href='event:linkEvent'>Link Event Text</a> | ]]>

   <![CDATA[<a href='http://ticore.blogspot.com' target='_blank'>Ticore's Blog</a>]]>

  </mx:htmlText>

 </mx:Label>

 

 <mx:Text selectable="false" link="onTxtLink(event)"

   rollOver="focusManager.deactivate()" rollOut="focusManager.activate()">

  <mx:htmlText>

   <![CDATA[Flex Text : <a href='event:linkEvent'>Link Event Text</a> | ]]>

   <![CDATA[<a href='http://ticore.blogspot.com' target='_blank'>Ticore's Blog</a>]]>

  </mx:htmlText>

 </mx:Text>

 

 <mx:Button label="Clear Log" click="textArea.text = '';" />

 <mx:TextArea id="textArea" width="100%" height="100%" />

</mx:Application>

轉載請註明出處 http://ticore.blogspot.com/2008/04/enable-flex-htmltext-link.html