弹性光标管理问题

Question

我有一个包含 spark TextInput 的 sparkborderContainer。 我在borderContainer上有一个mouse_down和mouse_up事件处理程序，以便在屏幕上拖动它；拖动时我改变了光标。

我想让 textInput 表现得像一个“标准”的 textInput，即当点击 textInput 时，用户不应该能够拖动整个组件，而只是像他/她通常那样与文本交互。另外，我希望 textInput 光标看起来像普通的 textInput 光标。

我不确定我这样做是否正确。我的假设是我需要停止在 textInput 上传播 mouse_down 和 mouse_up 以抑制其父级的拖动行为，并管理 rollOver 和 rollOut 以使光标看起来正常。请参阅下面的我的代码示例（为了简化它，没有borderContainer 或拖动 - 但代码将非常简单 - 只是更长一点）。

所以问题来了：如果单击 spark textInput 然后从它滚出，光标会变成 textInput 光标 + 为 borderContainer 设置的标准光标的组合。这似乎不会发生在 mx textInput 组件（因此是两个框）上，但不幸的是我需要使用 spark 组件。我的猜测是我要么没有正确调用 cursorManager，要么没有正确停止 mouse_up 的传播——它似乎应该命中 textInput 但不传播到borderContainer。我也试过 stopPropagation() 但没有运气。

希望得到任何建议/建设性的批评。

谢谢！

f

---

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               creationComplete="application1_creationCompleteHandler(event)"
               mouseDown="application1_mouseDownHandler(event)"
               mouseUp="application1_mouseUpHandler(event)">


<fx:Script>
    <![CDATA[
        import mx.events.FlexEvent;
        import mx.managers.CursorManager;
        [Bindable] [Embed(source="../resources/hand.png")] private var _handIcon:Class;
        [Bindable] [Embed(source="../resources/Fist.png")] private var _fistIcon:Class;

        private var _cursorID:int;


        protected function textinput1_rollOutHandler(e:MouseEvent):void
        {
            e.stopImmediatePropagation();
            CursorManager.removeCursor(_cursorID);
            _cursorID = CursorManager.setCursor(_handIcon);
        }


        protected function textinput1_rollOverHandler(e:MouseEvent):void
        {
            e.stopImmediatePropagation();
            CursorManager.removeCursor(_cursorID);                              
        }


        protected function application1_creationCompleteHandler(e:FlexEvent):void
        {
            _cursorID = CursorManager.setCursor(_handIcon);
        }


        private function stopPropagation(event:MouseEvent):void
        {
            event.preventDefault();
            event.stopImmediatePropagation();
        }

        protected function textinput1_mouseDownHandler(event:MouseEvent):void
        {
            stopPropagation(event);
        }


        protected function textinput1_mouseUpHandler(event:MouseEvent):void
        {
            stopPropagation(event);
        }


        protected function application1_mouseDownHandler(event:MouseEvent):void
        {
            CursorManager.removeCursor(_cursorID);
            _cursorID = CursorManager.setCursor(_fistIcon);
        }


        protected function application1_mouseUpHandler(event:MouseEvent):void
        {
            CursorManager.removeCursor(_cursorID);
            _cursorID = CursorManager.setCursor(_handIcon);
        }

    ]]>
</fx:Script>

<s:TextInput x="43" y="30"
             rollOut="textinput1_rollOutHandler(event)"
             rollOver="textinput1_rollOverHandler(event)"
             mouseDown="textinput1_mouseDownHandler(event)"
             mouseUp="textinput1_mouseUpHandler(event)"/>
<mx:TextInput x="43" y="70"
              rollOut="textinput1_rollOutHandler(event)"
              rollOver="textinput1_rollOverHandler(event)"
              mouseDown="textinput1_mouseDownHandler(event)"
              mouseUp="textinput1_mouseUpHandler(event)"/>

Answer 1

如果用户单击输入，您可以简单地不开始拖动并且不更改光标：

protected function application1_mouseDownHandler(event:MouseEvent):void
{
    var container:DisplayObjectContainer = event.target as DisplayObjectContainer;
    if (!container || container == textInput || textInput.contains(container))
        return;

    // start drag and change the cursor
}

Answer 2

我遇到了类似的问题，但容器中有几个 TextInput 字段。所以为了避免检查每一个，我使用了这个版本的想法：

 if (event.target is RichEditableText) return;

完美运行...

你好，J！