How can I add an event for a one time click to a function?

Question

I would like to add a click event listener to a function but would only like it to happen once. How could i do this?

I would like to stay clear of JQuery as well if it is possible please.

EDITED

As the answers that I am getting for this are fully satisfying my need i thought i may make it a bit more clear with context.

I am writing a function to draw a rectangle, first with one click on a button to initiate the rectangle function. Then there are two click event listeners in the drawRectangle function. These are the events i would like to happen only once in the function. Allowing the user to then create another rectangle if they click on the rectangle initiation button again.

Answer 1

Use modern JavaScript!

EventTarget.addEventListener("click", function() {

    // Do something cool

}, {once : true});

A Boolean indicating that the listener should be invoked at most once after being added. If true , the listener would be automatically removed when invoked.

- MDN web docs

All modern browsers support this feature

Other reference

Answer 2

You have to use removeEventListener once the event is fired once. However, removeEventListener takes a function as argument, which means you need to declare a named function, add it with addEventListener , and have it removing itself. Example:

function foo() {
    // do things, then
    removeEventListener('click', foo);
}

addEventListener('click', foo);

Answer 3

function one(el, type, fn) {
    function handler(event) {
        el.removeEventListener(type, handler);
        fn(event);
    }
    el.addEventListener(type, handler);
}

// use it like
one(window, 'resize', function () {
    alert("This triggers just once");
});

Example: http://jsfiddle.net/6njpem7x/

Answer 4

Combination of addEventListener and removeEventListener :

element.addEventListener("click", clickFunction);
function clickFunction(e) {
    console.log("clicked");
    element.removeEventListener("click", clickFunction);
}

jsFiddle

Answer 5

something like this

var el = document.getElementById('something');
el.addEventListener('click', doSomething);

function doSomething() {
  el.removeEventListener('click', doSomething);

  //code
}

Answer 6

The other answers are correct in that this can be achieved with a named function, but you don't need to declare the function separately. You can use a named function expression :

element.addEventListener("click", function handler(event) {
  this.removeEventListener("click", handler);
  // ...
});

An alternative, though less optimal, approach is to keep around a variable that keeps track whether the handler was executed:

var wasExecuted = false;
element.addEventListener("click", function(event) {
  if (wasExecuted) {
    return;
  }
  wasExecuted = true;
  // ...
});

The variable needs to be declared outside the handler but within scope, so that its value persists across event triggers.

Answer 7

Inside event handler you can use universal: e.target.removeEventListener(e.type, arguments.callee)
Or you can make special function for creating "one time" event listeners:

function oneTimeListener(node, type, callback) {
    // create event
    node.addEventListener(type, function(e) {
        // remove event listener
        e.target.removeEventListener(e.type, arguments.callee);
        // call handler with original context 
        // as it happens with native addEventListener
        return callback.call(this, e); 
    });
}

oneTimeListener(document.getElementById("myElement"), "click", myHandler);

Answer 8

You can pass the third argument { once: true } in addEventListener method call.

Use case : Imagine you have been building a website that have a feature for an online test and you have a button where user have to click to start the exam.

After the user click the button you want to remove the event listener from that button.

Live Demo :

 let button = document.getElementById('button'); button.addEventListener("click", function() { console.log('button clicked'); }, {once: true});

 <button id="button">Click Me!</button>

Note : This technique is not working with Internet explorer but as per the latest announcement, Support for Internet Explorer would be discontinued on June 15, 2022. Hence, we are good to go to use this technique.

Answer 9

You can set a cookie after first click:

document.cookie="click=1; expires=.......";

and add condition to listener - if cookie is set, you omit that.

Answer 10

Another simple solution which I'm using is to add a dummy class to the element to which we are listening so that it will not fire again.

const myButton = document.querySelector('#my-button:not(.init)');
myButton.addEventListener('click', (e) => {
     e.preventDefault();
     myButton.classList.add('init');
  });