Обнаружение перемещения мыши и отпускания на заблокированном перетаскиваемом объекте

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

В 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 ... вы хотите, чтобы она все еще реагировала даже после того, как вы отвалились от ручки? В зависимости от того, как вы хотите, чтобы это работало, это можно было сделать разными способами.

Пожалуйста, уточните причину, которую вы ищете.

Answer 2

Вместо вызова updateLevel() в MOUSE_MOVE случае головки, вызовите его в 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(); 
}); 

Я работал на аналогичной функции раньше, и я также необходимо обрабатывать Mouse_Leave этапе в. В зависимости от вашего требования вы также можете добавить MouseEvent.MOUSE_OUT в голову