Adding Mouse Handler not working after I added AngularJS [closed]

https://stackoverflow.com/questions/21208787

29-09-2022
|

Question

I have the following function where I pass a canvas element from one of my javascript code:

function addMouseHandler(canvas) {
    console.log(canvas); //first console log for logging canvas
    canvas.addEventListener('mousemove', function (e) {
        onMouseMove(e);
    }, false);
    canvas.addEventListener('mousedown', function (e) {
        console.log('here'); //second log for logging we are inside event listener
        onMouseDown(e);
    }, false);
    canvas.addEventListener('mouseup', function (e) {
        onMouseUp(e);
    }, false);
}

This works fine if I dont add AngularJS in my code. But after I add AngularJS, the code does not go into any addEventListener() methods.

My code still logs the first console.log() and it logs my canvas element properly:

<canvas width="945" height="550" id="mycanvas"></canvas>

But now it does not goes inside the addEventListener() method. I checked it using console.log('here') but this is never called.

Update: I just added ng-app="myApp" to my body element as <body ng-app="myApp"> and then this addEventListener stopped working. Nothing else angularjs in my code.

Solution

Ok found the issue... I had 2 times declared the controller... once in ng-controller and other in myApp.controller(). So my canvas was getting created twice and the mouse listerners were screwing up.

Licensed under: CC-BY-SA with attribution

Not affiliated with StackOverflow