Issues with .startDrag() and addEventListener


Hey guys,

I’ve been having issues using .startDrag() and event listeners.

I have a parent object with several child objects added to it. I’ve also added a couple of event listeners for some dragging functionality.
The intended behavior is for the parent to move once the child is dragged. In this case, I want a window to move only when its titlebar is dragged.
The problem is that the event listener activates when clicking anywhere on the parent. So instead of moving only when the titlebar is dragged, it activates when clicking anywhere on the window.

Code snippet:

class Window extends Sprite {

    \\Parameters condensed

  function new (color,width,height,titleBarColor,windowTitle) {

            var titleBar = new TitleBar(this,titleBarColor,width);

            // Adding Title
            var winTitle = new WindowTitle(windowTitle,width,height,this);

            winTitle.addEventListener(MouseEvent.MOUSE_DOWN, function(e){
            winTitle.addEventListener(MouseEvent.MOUSE_UP, function(e){



You pass params from outside. So it is hard to understand what is going on earlier.
Please, provide more code, or make the demo to show it here.



The parameters are only for drawing rectangles and buttons, which is why I didn’t include them. I’ll post other parts of the code if it helps.

Relevant Main Code :


import openfl.display.Bitmap;
import openfl.display.Sprite;
import openfl.Assets;

class Main extends Sprite {

public static var attributesWindow:Window.AttributesWindow;
var attributesWindowInit = 0;

  public function new () {
    stage.color = 0x000000;

    super ();

    //Window Call
    if (attributesWindowInit == 0) {
        buttonButton.addEventListener(MouseEvent.MOUSE_UP, function(e){
            attributesWindowInit = 1;
            attributesWindow = new Window.AttributesWindow();


Attributes Window Class:

class AttributesWindow extends Window{
        var attWidth = 200;
        var attHeight = 500;

        function new(){
              super(0x6e7889,attWidth,attHeight,0xf3b54a,"Sample Window");

Title Class that is called by the Window class in OP:

class WindowTitle extends TextField{

    var windowPosX = Window.windowPosX;
    var windowPosY = Window.windowPosY;
    var titleOffset = Window.titleOffset;
    var titleSize = Window.windowTitleSize;
    var titleBarHeight = Window.titleBarHeight;
    var windowObj:Window;

    function new(windowTitle,width,height,passedWindowObj){

            windowObj = passedWindowObj;

            var textFont:Font = Assets.getFont("fonts/rct2.ttf");
            var textFormat = new TextFormat(textFont.fontName);
            textFormat.size = titleSize;
            textFormat.align = 'center';
            textFormat.color = 0xffffff;
            textFormat.bold = true;
            this.text = windowTitle;
            this.x = windowPosX;
            this.y = windowPosY-titleBarHeight+titleOffset;
            this.width = width;
            this.height = height;
            this.selectable = false;
            this.embedFonts = true;
            this.defaultTextFormat = textFormat;
            this.antiAliasType = openfl.text.AntiAliasType.ADVANCED;
            this.sharpness = 300;





If I’m reading this correctly, you’re making winTitle the same width and height as the window itself? If so, that’s way larger than necessary to show a single line of text. And if the window’s child elements are sorted under winTitle, they won’t ever have a chance to interact with the mouse because winTitle will sit on top of everything and steal just about every MouseEvent.



Wow, I didn’t even notice that. Thank you so much Tamar!
I’ve spent hours trying to figure it out.