javascript remove "onclick" event listener

Question

I have tried many things, but none of them work. I wonder if it's impossible? I know the 'normal' way with 'bind', but the arrow functions are much more readable and I prefer to use them.

To better understand my question I made this sample code that illustrates the problem as fully as possible.

 class MyClass_XY { constructor(zID) { let ref = document.getElementById(zID); this.name = zID; this.Info = ref.querySelector('span'); this._Bt_Plus = ref.querySelector('.plus'); this._bt_Stop = ref.querySelector('.stop'); this.Nbre = 0; // this.stop = false; // I don't whant this, because this is a small sample code of something more complex this._Bt_Plus.onclick = e => this._f_Bt_Plus_click(e); this._bt_Stop.onclick = e => this._f_Bt_Stop_click(e); /* this.fct_Ref = null; this._Bt_Plus.addEventListener('click', this.fct_Ref = this._f_Bt_Plus_click.bind(this), false ); */ } _f_Bt_Plus_click(e) { e.stopPropagation(); console.log(e.target.innerText); this.Nbre++, this.Info.innerText = this.Nbre.toString(); } _f_Bt_Stop_click(e) { e.stopPropagation(); // this._Bt_Plus.removeEventListener('click', this.fct_Ref, false ); // is OK, how to deal the other? this._Bt_Plus.removeEventListener("click", this._f_Bt_Plus_click, true); // didn't work:/ console.log(this.name, '_Bt_Plus remove onclick '); } } var Ananas = new MyClass_XY('Pineapple'), // I am a frog Bananes = new MyClass_XY('Bananas');

 <p id='Pineapple'> pineapple <span>0</span> <button class="plus">+1 pineapple</button> <button class="stop">stop</button> </p> <p id='Bananas'> Bananas <span>0</span> <button class="plus">+1 Bananas</button> <button class="stop">stop</button> </p>

Answer 1

Because you didn't add the listener using addEventListener , removeEventListener won't work - to remove a listener attached by assigning to onclick , simply assign null to the onclick property again:

this._Bt_Plus.onclick = null;

 class MyClass_XY { constructor(zID) { let ref = document.getElementById(zID); this.name = zID; this.Info = ref.querySelector('span'); this._Bt_Plus = ref.querySelector('.plus'); this._bt_Stop = ref.querySelector('.stop'); this.Nbre = 0; // this.stop = false; // I don't whant this, because this is a small sample code of something more complex this._Bt_Plus.onclick = e => this._f_Bt_Plus_click(e); this._bt_Stop.onclick = e => this._f_Bt_Stop_click(e); /* this.fct_Ref = null; this._Bt_Plus.addEventListener('click', this.fct_Ref = this._f_Bt_Plus_click.bind(this) , false ); */ } _f_Bt_Plus_click(e) { e.stopPropagation(); console.log(e.target.innerText); this.Nbre++, this.Info.innerText = this.Nbre.toString(); } _f_Bt_Stop_click(e) { e.stopPropagation(); // this._Bt_Plus.removeEventListener('click', this.fct_Ref , false ); // is OK, how to deal the other ? this._Bt_Plus.onclick = null; console.log(this.name, '_Bt_Plus remove onclick '); } } var Ananas = new MyClass_XY('Pineapple'), // I am a frog Bananes = new MyClass_XY('Bananas'); 

 <p id='Pineapple'> pineapple <span>0</span> <button class="plus">+1 pineapple</button> <button class="stop">stop</button> </p> <p id='Bananas'> Bananas <span>0</span> <button class="plus">+1 Bananas</button> <button class="stop">stop</button> </p> 

If you did use addEventListener , then to use removeEventListener later, you would have to have a reference to the same function you passed in to addEventListener originally, such as with

this.plusHandler = e => this._f_Bt_Plus_click(e);
this._Bt_Plus.addEventListener('click', this.plusHandler);

and then

this._Bt_Plus.removeEventListener("click", this.plusHandler);

 class MyClass_XY { constructor(zID) { let ref = document.getElementById(zID); this.name = zID; this.Info = ref.querySelector('span'); this._Bt_Plus = ref.querySelector('.plus'); this._bt_Stop = ref.querySelector('.stop'); this.Nbre = 0; this.plusHandler = e => this._f_Bt_Plus_click(e); this._Bt_Plus.addEventListener('click', this.plusHandler); this._bt_Stop.onclick = e => this._f_Bt_Stop_click(e); /* this.fct_Ref = null; this._Bt_Plus.addEventListener('click', this.fct_Ref = this._f_Bt_Plus_click.bind(this) , false ); */ } _f_Bt_Plus_click(e) { e.stopPropagation(); console.log(e.target.innerText); this.Nbre++, this.Info.innerText = this.Nbre.toString(); } _f_Bt_Stop_click(e) { e.stopPropagation(); // this._Bt_Plus.removeEventListener('click', this.fct_Ref , false ); // is OK, how to deal the other ? this._Bt_Plus.removeEventListener("click", this.plusHandler); console.log(this.name, '_Bt_Plus remove onclick '); } } var Ananas = new MyClass_XY('Pineapple'), // I am a frog Bananes = new MyClass_XY('Bananas'); 

 <p id='Pineapple'> pineapple <span>0</span> <button class="plus">+1 pineapple</button> <button class="stop">stop</button> </p> <p id='Bananas'> Bananas <span>0</span> <button class="plus">+1 Bananas</button> <button class="stop">stop</button> </p> 

Answer 2

You can add a class to the element in JS and in the CSS set the pointer-events property to none.

JavaScript

yourElement.classList.add("no-events");

CSS

.no-events{
   pointer-events: none;
}