检测锁定的可拖动对象上的鼠标移动和释放

Question

我正在制作一个自定义滑块组件。头部（您拖动的东西）的编程如下：

        head.addEventListener(MouseEvent.MOUSE_DOWN, function():void {
            head.startDrag(false, new Rectangle(stubDiv,0,width - stubDiv - ((levels-maxLevel)*stubDiv),0));
        });
        head.addEventListener(MouseEvent.MOUSE_MOVE, function():void {
            updateLevel();
        });
        head.addEventListener(MouseEvent.MOUSE_UP, function():void {
            head.stopDrag();
            setHeadPos();
        });

由于头部被限制在滑块区域，因此鼠标可以远离它。如果发生这种情况，对象仍在被拖动，但它不会接收 MOUSE_MOVE 事件，如果释放鼠标，也不会接收 MOUSE_UP 事件。

最好的解决方案是什么？

Answer 1

不要在 head 的 MOUSE_MOVE 事件中调用 updateLevel()，而是在 head 的 ENTER_FRAME 事件中调用它：

head.addEventListener(MouseEvent.MOUSE_DOWN, function():void { 
    head.startDrag(false, new Rectangle(stubDiv,0,width - stubDiv - ((levels-maxLevel)*stubDiv),0)); 
    head.addEventListener(Event.ENTER_FRAME, function():void  { updateLevel(); });
}); 

head.addEventListener(MouseEvent.MOUSE_UP, function():void { 
    head.stopDrag(); 
    head.removeEventListener(Event.ENTER_FRAME, function():void  { updateLevel(); });
    setHeadPos(); 
}); 

head.Stage.addEventListener(Event.MOUSE_LEAVE, function():void { 
    head.stopDrag(); 
    head.removeEventListener(Event.ENTER_FRAME, function():void  { updateLevel(); });
    setHeadPos(); 
}); 

我之前研究过类似的功能，并且还需要处理 Stage 的 Mouse_Leave。根据您的要求，您可能还想将 MouseEvent.MOUSE_OUT 添加到 head

Answer 2

在 AS3 中，这是通过向舞台添加一个 MouseEvent 侦听器来侦听 MOUSE_UP 事件来处理的。

head.addEventListener(MouseEvent.MOUSE_DOWN, _handleDown);

function _handleDown($evt:MouseEvent):void {
    // add a MouseEvent.MOUSE_UP listener to the stage
    stage.addEventListener(MouseEvent.MOUSE_UP, _handleUp);
    head.removeEventListener(MouseEvent.MOUSE_DOWN, _handleDown);
    head.addEventListener(MouseEvent.MOUSE_MOVE, _handleMove);
    head.addEventListener(MouseEvent.MOUSE_UP, _handleUp);
    head.startDrag(false, new Rectangle(stubDiv,0,width - stubDiv - ((levels-maxLevel)*stubDiv),0)
}

function _handleMove($evt:MouseEvent):void {
    updateLevel();
}

function _handleUp($evt:MouseEvent):void {
    // remove the MouseEvent.MOUSE_UP listener from the stage
    stage.removeEventListener(MouseEvent.MOUSE_UP, _handleUp);
    head.removeEventListener(MouseEvent.MOUSE_UP, _handleUp);
    head.removeEventListener(MouseEvent.MOUSE_MOVE, _handleMove);
    head.addEventListener(MouseEvent.MOUSE_DOWN, _handleDown);
    head.stopDrag();
    setHeadPos();
}

正如您所看到的，出于风格问题，我避免在事件侦听器中使用匿名函数。在大多数情况下，这允许更大的灵活性，并且在我看来，更容易阅读。

至于您的其他问题，没有“滚动手柄”对 MOUSE_MOVE 事件做出反应...您是否希望它即使在您滚离手柄后仍然做出反应？根据您希望其如何工作，可以通过多种方式完成。

请准确说明您正在寻找什么行为。