Troubleshooting the failure of the addEventListener mouseEvent in an Angular environment

Question

Troubleshooting the failure of the addEventListener mouseEvent in an Angular environment

Recently, I've been encountering an issue with adding addEventListener to dynamically created HTML canvas elements. Everything was working fine before, but now none of the events seem to be triggered. Below is the code snippet I am currently using:

this.canvas.addEventListener('mousedown', (event) => {...});

Is there another method available to register mouse/touch events for DOM elements?

Check out this Stackblitz example

javascript angular typescript

Answer 1

Answer №1

Make sure you are able to access the this.canvas in your class. Here are some alternative methods: 1. One way is to use plain JavaScript, select the element by id and add an event listener to it.

// Add event listener to table
var el = document.getElementById("outside");
el.addEventListener("click", yourCustomCallBackFunction);

2. Another method is to create a directive and use it for your canvas, see example code below:

import { Directive, ElementRef, Renderer, HostListener } from '@angular/core';
@Directive({
selector: '[appChbgcolor]'
})
export class ChangeBgColorDirective {
constructor(private el: ElementRef, private renderer: Renderer) {
    // this.ChangeBgColor('red');
}
@HostListener('mouseover') onMouseOver() {
    this.ChangeBgColor('red');
}
@HostListener('click') onClick() {
    window.alert('Host Element Clicked');
}
@HostListener('mouseleave') onMouseLeave() {
    this.ChangeBgColor('black');
}
ChangeBgColor(color: string) {
    this.renderer.setElementStyle(this.el.nativeElement, 'color', color);
 }
}

Then, place the directive in your HTML like this:

<div appChbgcolor>
     <h3>{{title}}</h3>
</div>

Reference: Detailed description of hostListener in Angular

Answer 2

Make sure you are able to access the this.canvas in your class. Here are some alternative methods: 1. One way is to use plain JavaScript, select the element by id and add an event listener to it.

// Add event listener to table
var el = document.getElementById("outside");
el.addEventListener("click", yourCustomCallBackFunction);

2. Another method is to create a directive and use it for your canvas, see example code below:

import { Directive, ElementRef, Renderer, HostListener } from '@angular/core';
@Directive({
selector: '[appChbgcolor]'
})
export class ChangeBgColorDirective {
constructor(private el: ElementRef, private renderer: Renderer) {
    // this.ChangeBgColor('red');
}
@HostListener('mouseover') onMouseOver() {
    this.ChangeBgColor('red');
}
@HostListener('click') onClick() {
    window.alert('Host Element Clicked');
}
@HostListener('mouseleave') onMouseLeave() {
    this.ChangeBgColor('black');
}
ChangeBgColor(color: string) {
    this.renderer.setElementStyle(this.el.nativeElement, 'color', color);
 }
}

Then, place the directive in your HTML like this:

<div appChbgcolor>
     <h3>{{title}}</h3>
</div>

Reference: Detailed description of hostListener in Angular

Answer 3

Answer №2

After some trial and error, I managed to get it functioning by adjusting the event listener to attach to the document itself rather than the canvas element.

document.addEventListener('mousedown', (event) => {
      console.log('mousedown called');
      event.preventDefault();
      this._setScratchPosition();
      document.addEventListener('mousemove', this.scratching);
      this.callbackFun();

Alternatively, you could also use:

window.addEventListener('mousedown', (event) => {
      console.log('mousedown called');
      event.preventDefault();
      this._setScratchPosition();
      window.addEventListener('mousemove', this.scratching);
      this.callbackFun();
    });

If you prefer a more specific approach, you can declare a new variable like so:

public c: any;

and then add:

this.c = document.getElementById('myCanvas');
    this.c.addEventListener('scratch.move', () => {
      this.percent = Number(this.getPercent().toFixed(2));
      console.log('scratch.move called');
      if (this.percent > 5) {
        this.togglePrizeLabel();
      }
    });

By following these adjustments, everything now functions as intended. It is important to note that direct referencing of a canvas object may not work as expected, as discussed in this Stack Overflow thread.

Answer 4

After some trial and error, I managed to get it functioning by adjusting the event listener to attach to the document itself rather than the canvas element.

document.addEventListener('mousedown', (event) => {
      console.log('mousedown called');
      event.preventDefault();
      this._setScratchPosition();
      document.addEventListener('mousemove', this.scratching);
      this.callbackFun();

Alternatively, you could also use:

window.addEventListener('mousedown', (event) => {
      console.log('mousedown called');
      event.preventDefault();
      this._setScratchPosition();
      window.addEventListener('mousemove', this.scratching);
      this.callbackFun();
    });

If you prefer a more specific approach, you can declare a new variable like so:

public c: any;

and then add:

this.c = document.getElementById('myCanvas');
    this.c.addEventListener('scratch.move', () => {
      this.percent = Number(this.getPercent().toFixed(2));
      console.log('scratch.move called');
      if (this.percent > 5) {
        this.togglePrizeLabel();
      }
    });

By following these adjustments, everything now functions as intended. It is important to note that direct referencing of a canvas object may not work as expected, as discussed in this Stack Overflow thread.

Troubleshooting the failure of the addEventListener mouseEvent in an Angular environment

Answer №1

Answer №2

Similar questions

What is the best way to access a document that has the lang attribute set to "en" using JavaScript?

utilizing routerLinks to transfer data and trigger a specific function

Revert Bootstrap 4 Sidebar to its Previous State Upon Navigating Back in the Browser with Recursive Expansion

How can I incorporate a JavaScript module into my Typescript code when importing from Typeings?

What steps can I take to resolve the issue in my code? I keep receiving a type error stating that it cannot read

The reference to a $scope array in AngularJS has not been properly updated

Employ a variable in order to send json

What method does the browser use to identify angularjs tags within HTML documents?

When using Angular 2's HTTP POST method, it initiates an OPTIONS request

Navigating the coordinates for iframe integration in angular js

Creating a nested type using template literal syntax

Showing the Datepicker from jQuery right in the middle of the screen

Incorporating a script into Angular can only be done within the index.html file

Completely charting the dimensions of an unfamiliar object (and the most effective method for determining its extent)

Chrome will automatically retry an AJAX POST request if it times out after 10 seconds

Timezones not synchronizing properly with Moment.js

IE is giving an "Access is denied" message when making an Ajax request

Evaluating text presence with Nightwatch and Selenium by checking for single quotes in an element

The toggleClass() function is only toggling between a single class

Toggle visibility of table using JavaScript