Ссылка внутри TextFlow: rollOver / rollOut пузыри, не должна пузыриться, и ее нельзя избежать - PullRequest
Новая
       22

Ссылка внутри TextFlow: rollOver / rollOut пузыри, не должна пузыриться, и ее нельзя избежать

2 голосов
/ 24 мая 2011

У меня странное поведение. У меня есть ссылка HTML внутри TextFlow. Когда я устанавливаю linkHoverFormat, он начинает посылать события rollOver / rollOut вверх по цепочке. Эти события говорят, что не пузырь, но так или иначе они делают. И я не могу остановить их от этого.

Вот пример: 

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx">

  <fx:Declarations>
    <s:TextLayoutFormat id="linkNormal" textDecoration="none" color="0x556677"/>  
    <s:TextLayoutFormat id="linkHover" textDecoration="underline" color="0x0000FF"/>
    <s:TextFlow id="textFlow1" 
                linkActiveFormat="{linkHover}" 
                linkHoverFormat="{linkHover}"
                linkNormalFormat="{linkNormal}">
      <s:p> <s:a href="http://projects.nunogodinho.com">hover</s:a> </s:p>
    </s:TextFlow>
  </fx:Declarations>

  <fx:Script>
    <![CDATA[

      // This pair of handlers is triggered by the panel
      protected function rollOverHandler(e:MouseEvent):void {
        panel.title = "over";
      }
      protected function rollOutHandler(e:MouseEvent):void {
        panel.title = "out";
      }

    ]]>
  </fx:Script>

  <s:Panel left="10" top="10" id="panel" mouseOver="rollOverHandler(event)" mouseOut="rollOutHandler(event)">
    <s:RichEditableText id="ret1"
                        top="10"
                        editable="false"
                        textFlow="{textFlow1}" />
  </s:Panel>

</s:WindowedApplication>

Если вы запустите это приложение и наведете указатель мыши на ссылку несколько раз, не выходя из панели, вы увидите, что она все еще меняет текст.

Поэтому я решил попытаться остановить это странное событие от пузырей: 

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx">

  <fx:Declarations>
    <s:TextLayoutFormat id="linkNormal" textDecoration="none" color="0x556677"/>  
    <s:TextLayoutFormat id="linkHover" textDecoration="underline" color="0x0000FF"/>
    <s:TextFlow id="textFlow2" 
                linkActiveFormat="{linkHover}" 
                linkHoverFormat="{linkHover}"
                linkNormalFormat="{linkNormal}">
      <s:p> <s:a rollOver="linkelement2_rollOverHandler(event)" rollOut="linkelement2_rollOutHandler(event)" href="http://projects.nunogodinho.com">hover</s:a> </s:p>
    </s:TextFlow>
  </fx:Declarations>

  <fx:Script>
    <![CDATA[
      import flashx.textLayout.events.FlowElementMouseEvent;

      // This pair of handlers is triggered by the panel
      protected function rollOverHandler(e:MouseEvent):void {
        panel.title = "over";
      }
      protected function rollOutHandler(e:MouseEvent):void {
        panel.title = "out";
      }

      // This pair of handlers is triggered by the <A> element inside textFlow2
      // and I hoped it would stop the event from bubbling up to the panel
      protected function linkelement2_rollOverHandler(e:FlowElementMouseEvent):void {
        e.preventDefault();
        e.stopImmediatePropagation();
        e.stopPropagation()
      }
      protected function linkelement2_rollOutHandler(e:FlowElementMouseEvent):void {
        e.preventDefault();
        e.stopImmediatePropagation();
        e.stopPropagation()
      }

      // I also tried to intercept the event in the RichEditableText but got the same weird
      // behavior: the event triggers the panel's rollOver/rollOut intermittently


    ]]>
  </fx:Script>

  <s:Panel left="10" top="10" id="panel" mouseOver="rollOverHandler(event)" mouseOut="rollOutHandler(event)">
    <s:RichEditableText top="10" left="55"
                        editable="false"
                        textFlow="{textFlow2}" />
  </s:Panel>

</s:WindowedApplication>

Я перепробовал все комбинации preventDefault, stopImmediatePropagation и stopPropagation. Он изменяет поведение события, но также уничтожает эффект зависания на ссылке.

Затем я попытался перехватить событие в RichEditableText, но получил такие же результаты.

Однажды у меня возникла похожая проблема, но я узнал, что это потому, что я использовал события mouseOver / mouseOut вместо rollOver / rollOut. Так как я переключился на rollOver / rollOut, он работал нормально. До сих пор.

А теперь я невежественен.

Пожалуйста, помогите.

Спасибо.

...