To remove an event listener by name with Konva, we can namespace the event type with the on()
method so that we can later remove the event listener by the same namespace with the off()
method.
Instructions: Click on the circle to see two alerts triggered from two different onclick event bindings. Remove the event listeners using the buttons to the left, and again click on the circle to observe the new onclick bindings.
Konva Remove By Name Demo view raw <!DOCTYPE html > <html > <head > <script src ="https://unpkg.com/[email protected] /konva.min.js" > </script > <meta charset ="utf-8" /> <title > Konva Remove Event Listener by Name Demo</title > <style > body { margin: 0; padding: 0; overflow: hidden; background-color : #f0f0f0 ; } #buttons { position: absolute; top: 5px; left: 10px; } </style > </head > <body > <div id ="container" > </div > <div id ="buttons" > <button id ="remove1" > Remove First Listener</button > <button id ="remove2" > Remove Second Listener</button > <button id ="removeAll" > Remove All Listeners</button > </div > <script > function writeMessage (message) { text.text(message); } var stage = new Konva.Stage({ container: 'container' , width: window .innerWidth, height: window .innerHeight, }); var layer = new Konva.Layer(); var circle = new Konva.Circle({ x: stage.width() / 2, y: stage.height() / 2 + 10, radius: 70, fill: 'red' , stroke: 'black' , strokeWidth: 4, }); circle.on('click.event1' , function () { alert('First Listener' ); }); circle.on('click.event2' , function () { alert('Second Listener' ); }); layer.add(circle); stage.add(layer); document .getElementById('remove1' ).addEventListener( 'click' , function () { circle.off('click.event1' ); alert('First onclick removed' ); }, false ); document .getElementById('remove2' ).addEventListener( 'click' , function () { circle.off('click.event2' ); alert('Second onclick removed' ); }, false ); document .getElementById('removeAll' ).addEventListener( 'click' , function () { circle.off('click' ); alert('All onclicks removed' ); }, false ); </script > </body > </html >