The removeEventListener function is failing to properly remove the keydown event

Every time my component is rendered, I attach an event listener.

 mounted() {
    window.addEventListener("keydown", e => this.moveIndex(e));
}

Interestingly, even when placed within the moveIndex method itself, the event listener persists and cannot be removed. Here's how I am attempting to remove it:

 moveIndex(e) {
    ...
      case 0:
        player.play({
           uri: "https://tv-trtturk.live.trt.com.tr/master.m3u8"
          });
          window.removeEventListener("keydown", e => this.moveIndex(e));
       break;
   ...
}

Despite trying to remove the event listener through a button click event, I encounter the same issue of it not being removed. Am I overlooking something?

javascriptvue.js

Answer №1

removeEventListener states that the listener must be the same:

The EventTarget.removeEventListener() function removes an event listener from the EventTarget that was previously added using EventTarget.addEventListener().

Because 

(e => this.moveIndex(e)) !== (e => this.moveIndex(e))
, they are considered different listeners.

The correct way to do it is

window.addEventListener("keydown", this.moveIndex);

and

window.removeEventListener("keydown", this.moveIndex);

Since moveIndex takes e as a parameter and Vue binds methods to component instance, using this.moveIndex as a callback is safe.

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

triggering controller on click event in JSP

Using a spring web application, I need to call a controller in a java file from a JSP file using an ajax function. How can I achieve this? <p class="bottom-slide-corners"> <a class="billing" href="#Billing"><spri ...

javascriptjavaspringjsp

Using JavaScript to locate a child element within its parent

What is the most effective approach to locate a child element (using class or ID) of a specific parent element using only pure JavaScript without relying on jQuery or other frameworks? In this scenario, I am interested in finding child1 or child2 within p ...

javascriptdom

What steps can be taken to repair the script?

https://jsfiddle.net/fnethLxm/10/ $(document).ready(function() { parallaxAuto() }); function parallaxAuto() { var viewer = document.querySelector('.viewer.active'), frame_count = 5, offset_value = 500; // init control ...

javascriptscrollscrollmagic

Toggle the display of dropdown 2 or dropdown 3 depending on the option chosen in dropdown 1

I am struggling with a form that contains 3 dropdowns: <select id="1" required> <option value="">Choose an option</option> <option value="1">Apple</option> <option value="2">Orange ...

javascriptjqueryforms

Pairing Video.js with vue-electron enables seamless video playlist functionality

Currently, I am working on an autoplay video playlist feature. To achieve this, I am using glob to retrieve all video absolute paths from a specific folder. Below is the code snippet that showcases my approach: let vm = this; let trailerList = null; trail ...

vue.jselectronvideo.js

"Presenting Invoice Information on an Invoice Template: A Step-by-Step Guide

Currently, I am working with Laravel 5.7 and VueJs 2.5.*, where I have a table of invoices. My goal is to create a new component that will display a specific invoice based on user selection, allowing them to view or print the chosen invoice. I am still ex ...

javascripthtmllaravelvue.jsvuejs2

What is the method for retrieving a class's property without creating an object instance?

Currently, I am working with a class setup like this: class MyClass { constructor(privateInfo) { this.a = "a"; this.b = "b"; } myMethod() { return privateInfo; } } It seems that the privateInfo variable needs to be ...

javascript

A guide on conditionally rendering components in React

When I try to add a nested if statement in JSX, condition ? true example : false example works perfectly. However, when I change it to if(condition) { ... }, it displays an error in the console: https://i.stack.imgur.com/TIBRo.jpg Example with one-line c ...

javascriptreactjsjsx

Submitting an AJAX request to upload an XML file and an image file simultaneously in one call

I need to send both an uploaded image and an uploaded XML file to a PHP file using a single AJAX call. I have tried using two form data instances, but I am not sure if this is the correct approach. <input type="file" class="form-control-file" name="fil ...

javascriptjqueryajaxfile-uploadimage-uploading

Reconstruct the altered block with the help of external scripts

I am in a situation where I must utilize a framework that modifies the DOM structure of my HTML. An example snippet of the HTML code being used is as follows: <div id="testID" ng-show="example === 'show'">Some Content</div> The fram ...

javascriptjqueryangularjsdom

Setting intervals to change background images resulted in a delay

I've been working on creating an animation that switches between 2 images used as the background image of a div. Here's the code snippet I've been using: var spacecraftInterval = setInterval(function() { if (access == true) { var image ...

javascripthtmljquerycssbrowser

How to extract query string parameters using node.js

I'm currently working on fetching query string parameters from a URL using the node.js restify module. This is an example of the URL I am dealing with: Here is the relevant code snippet: server.use(restify.bodyParser()); server.listen(7779, functi ...

javascriptnode.jsurl-parametersrestify

The http url on an iPad in the src attribute of an HTML 5 video tag is malfunctioning

Having trouble loading a video on iPad using an http URL in the src attribute of an HTML5 video tag. Both static and dynamic approaches have been attempted, but it works fine on web browsers. Here is an example of the code: Static: <!DOCTYPE html ...

javascriptcsshtml

Creating a tooltip for a specific cell within an AG grid react component is a useful customization feature

How can I customize the tooltip for a specific row in my AG Grid? I see that there is a tooltipField available in ColDefs, but I want to provide a custom string instead of using a field value. Is there a way to achieve this customization? ...

javascriptreactjstooltipag-grid

The browser fails to render an EJS-generated page when responding to a Fetch request

Today, I encountered a strange issue that has left me puzzled. In summary, I have been sending a PUT request from a user form to the backend. Since forms do not natively support PUT/DELETE requests, I had to use a script to handle this task for me. let for ...

javascriptnode.jsexpressbackend

What are the best methods for looping through ids in MongoDB and executing actions on them?

I am working with an entity object that has the following response: [ { "public": false, "_id": "5eb6da3635b1e83", "createdAt": "2020-05-09T16:28:38.493Z", "updatedA ...

javascriptnode.jsmongodbexpress

The point in the vector data is incorrectly positioned on the map in OpenLayers

I am looking to display a world map using the default OpenLayers WMS, along with a single point on it that will have interactive events like onhover. Below is my code snippet: var options = { projection: ...

javascriptvectoropenlayerspoint

Exploring Data Objects in Vue.js

I have a data() object in my Maincomponent.vue. Inside the data(), there is an array named myDatabase that contains multiple objects. My goal is to utilize methods to access the fields within myDatabase. I am looking to create functionality to toggle the ...

vue.jsvuejs2nuxt.js

Using console.log as an event listener

Check out this fiddle for reference: http://jsfiddle.net/calvintennant/jBh3A/ I am interested in utilizing console.log as an event listener: badButton.addEventListener('click', console.log); However, the fiddle demonstrates that this approach ...

javascript

Can the dashstyle be configured for a solid-gauge chart in Highcharts?

I am having trouble making the border dashed on my pie chart. It seems that the solution provided for solidgauge charts is not working as expected. Interestingly, the graph property is undefined for solidgauge charts. I wonder if the dashed style could be ...

javascripthighchartsborderpie-chart