JavaScript object: handling a mouse event-CodePudding

I have defined this class:

class ChartArea {

    constructor(Canvas) {
        this.Canvas = Canvas;
        this.Canvas.addEventListener("mousedown", (e) => {mousedown_Handler(e)}, false);
    }
    
    X_MouseDown=0;
    Y_MouseDown=0;
 
    mousedown_Handler(e) {
        X_MouseDown = e.x;
        Y_MouseDown = e.y ;
      }
 }

where obviously I would wish to handle the mouse down event of a canvas.

When I run it, however, I get the error that the event handler cannot be found *Uncaught ReferenceError: mousedown_Handler is not defined*.

I am new to js and probably I am putting it in the wrong place. Could you please tell me how do I make the listener "visible" and get the event handled?

The object is instantiated with something like:

var CA = new ChartArea( Canvas);

where obviously the canvas has been defined previously:

var Canvas = document.getElementById("myCanvas");

clearly getting a plain HTML canvas,

<canvas id="myCanvas" width="800" height="500"></canvas>

Thank you!

CodePudding user response：

class ChartArea {
    constructor(Canvas) {
        this.Canvas = Canvas;
        this.Canvas.addEventListener("mousedown", (e) => {this.mousedown_Handler(e)}, false);
    }

    X_MouseDown=0;
    Y_MouseDown=0;

    mousedown_Handler(e) {
        this.X_MouseDown = e.x;
        this.Y_MouseDown = e.y ;
    }
}

You missed this.