The RemoveEventListener function seems to be malfunctioning within Angular2 when implemented with TypeScript

I am currently incorporating three.js into Angular2. The code I am using is quite straightforward, as shown below.

this.webGLRenderer.domElement.addEventListener('mousedown', ()=>this.onMouseDown(<MouseEvent>event), false);

this.webGLRenderer.domElement.removeEventListener('mousedown', ()=>this.onMouseDown(<MouseEvent>event), false);

I have also attempted the following:

this.webGLRenderer.domElement.removeEventListener('mousedown', this.onMouseDown, false);

Despite my efforts, the event on the domelement persists. It appears that while addEventListener functions correctly, removing it does not. Thank you in advance for any assistance.

javascriptangulartypescript

Answer №1

In order to effectively use removeEventListener, it is important that the functions callbacks are not anonymous. The second example you provided should work as long as you are utilizing this.onMouseDown when adding the listener.

When removing event handlers, it is necessary for the function specified in the addEventListener() method to be an external function.

Source: HERE

To implement this, try the following:

this.webGLRenderer.domElement.addEventListener('mousedown', this.onMouseDown, false);
this.webGLRenderer.domElement.removeEventListener('mousedown', this.onMouseDown, false);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Integrating Paytm with Angular 6: A Step-by-

I am currently facing an issue where I am not being redirected to the paytm server's page after using the HTML form for integrating paytm in PHP. Can anyone provide assistance with this matter? ...

angularpaytm

Are there any options for a JavaScript coding platform that can be used on a tablet device?

As someone who frequently travels by train, I recently purchased an Android tablet and have a strong desire to learn JavaScript. While I can read books on my tablet, I am eager to also be able to program on it. Are there any options available for develop ...

javascriptandroid

What is the correct way to store user input in the "store" using vuex.js? Can you help me identify where I went wrong?

On the third day of my suffering, I seek your help. Can you please guide me on how to save text input in "store" in vuex.js and then add it to the value of the same input itself? I've attempted it like this but seem to be making a mistake somewhere. ...

javascriptvue.jsvuex

Leverage the object imported from the global <script> tag within a React component

I am currently attempting to incorporate a PayPal button into my React project. As per the instructions provided in PayPal's developer documentation, I have to include <script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"& ...

javascriptreactjspaypal

What strategies can be used to ensure that the page layout adjusts seamlessly to even the smallest shifts in window size?

Of course, I am familiar with media queries and how they allow us to set specific min-width and max-width ranges for CSS changes. However, when I look at the website styledotme.com, I notice that the block/div beneath the navigation bar gradually shrinks ...

javascriptcssresponsive-designmedia-queries

The sequence of indices in a for loop and making Ajax requests

I'm dealing with a challenge related to executing ajax requests within a for loop. Despite researching solutions online and implementing them to prevent synchronous request execution, I still face an issue in maintaining the correct order of the succe ...

javascriptjqueryajax

Tips for utilizing Angular Js to redirect a webpage

Can someone help me figure out how to redirect to another page using Angular Js? I've searched through various questions here but haven't found a successful answer. This is the code I'm currently working with: var app = angular.module(&ap ...

javascriptangularjs

Utilizing PrimeNG menu items to bind commands to a base class function

I'm struggling to connect a parent class function with my Angular 2 PrimeNG menu options. HTML <p-menu #menu popup="popup" [model]="exportItems"></p-menu> <button type="button" class="fa fa-download" title="Export As" (click)="menu.to ...

angulartypescriptprimeng

How to launch a new window for a popup

How can I make IE8 open new windows as pop-ups without changing browser settings? I want to use JavaScript's window.open() function. Firefox opens new windows correctly, but IE8 opens them in tabs instead of pop-up windows. Any suggestions on how to a ...

javascriptjavaajaxinternet-explorer-8dom-events

Manipulating an SVG file with JavaScript

Within the HTML code, there is a photo already added as an SVG file. I am interested in learning how to enable the user to select between two options - either a cross or a zero. Upon clicking on the designated area, the chosen figure should appear (resembl ...

javascripthtmlcsssvgvector

Other Components take turns submitting the form in one Component

Two components, CreateCandidate and Technologies are being used. CreateCandidate requires technologies from the Technologies Component. When passing the technologies to CreateCandidate, the form within CreateCandidate is submitted. Below is the code: Crea ...

javascriptreactjsreact-redux

Utilizing the map() function to iterate through a list of outcomes and assigning the resulting array as the state of a component in ReactJS

Currently, I am facing an issue with assigning an array value to the state in my react project. In order to do this, I have initialized my state as follows: constructor(props) { super(props); this.state = { category: [] } } My objec ...

javascriptreactjs

Modify the page's query parameters by incorporating an input field within NextJS's App Router

I'm trying to update query parameters based on user input dynamically using the onChange event. However, I'm facing an issue where the query parameters are updated before the input value is updated after a slight delay. My aim is to achieve insta ...

javascriptreactjsnext.jsnext.js13

Express JS: The requested resource does not have the 'Access-Control-Allow-Origin' header

Currently, I am encountering an issue with my API running on a server and the front-end client attempting to retrieve data from it. Previously, I successfully resolved the cross-domain problem, but now it seems like something has changed as I am receiving ...

javascriptajaxnode.jsexpresscors

Conceal virtual keyboard on mobile when in autocomplete box focus

I would like the keyboard to remain hidden when the autocomplete box is focused or clicked, and only appear when I start typing. The code below currently hides the keyboard when any alphabets or numbers are pressed. However, I want the keyboard to be hidd ...

javascriptreactjsmobilematerial-uiautocomplete

Unable to initialize default values on Form Load in Angular Reactive Forms

My goal is to make an HTTP request by passing an ID, then take the response and assign the values to form fields. I attempted using setValue and patchValue methods, but they did not yield the desired results. spService itemData = new ItemData() getIte ...

angularangular7angular-reactive-forms

Using React components to create an anchor element for a popover display

Hey, I'm just starting out with React and trying to wrap my head around Hooks like useState. It's a bit challenging for me, and I want to keep things simple without making them too complex. I've encountered an issue when transitioning a Rea ...

javascriptreactjsreact-hookspopover

Issue with express-validator returning undefined value on forms set to enctype='multipart/form-data'

Currently, I am developing a login authentication application using basic node.js+express. While extracting values (such as name, email, etc) from the registration page, I utilize express-validator for validation. However, I encounter an issue where all va ...

javascriptnode.jsmongodbexpressexpress-validator

Using Polymer in Chrome Extension content script

Currently, I am experimenting with incorporating Polymer into a chrome extension. My main objective is to take advantage of styling encapsulation in order for my content scripts to operate independently from the CSS on the visited webpage. To begin, I hav ...

javascripthtmlgoogle-chrome-extensionpolymer

How can specific times be disabled using Laravel-9 jQuery Timepicker?

$(document).ready(function(){ $('#time').timepicker({ timeFormat: 'h:mm a', interval: 60, minTime: '9', maxTime: '4:00pm', defaultTime: '9', startTime: '9:00', dyna ...

javascriptjquerylaraveltimepicker