CODEWITHSUNDEEP
javascriptpopup
Alex
Alex

Reputation: 1469

How to make onclick event to work only once

what I want to do is when someone click anywhere in the page. A new window will open, but I want this to happen only once, so when someone click again on body, the function should not run. Any advice? No jquery please.

<!DOCTYPE html>
<html>
<body onclick="myFunction()">
<script>
    function myFunction() {
        window.open("http://www.w3schools.com");
    }
</script>
</body>
</html>

Upvotes: 12

Views: 60773

Answers (6)

AdityaUbale
AdityaUbale

Reputation: 45

This is JQuery code.

We can use bind() unbind() / on() off() as below to avoid multiple click.

OR

We can use one() function to happen click only once.

$(document).ready(function () {
    $('body').bind('click', function () {
        alert('button clicked');
        $(this).unbind('click');
    });
});

OR

$(document).ready(function () {
    $('body').one('click', function () {
        alert('button clicked');
    });
});

Upvotes: 1

Stefan Miranda
Stefan Miranda

Reputation: 161

Using "once" in the "options" parameter for the addEventListener method is unironically enough a great way of using a function once.

function myFunction(){
    console.log("hey")
}

document.body.addEventListener("click", myFunction,{once:true})

Upvotes: 16

harishk
harishk

Reputation: 428

<script type="text/javascript">
  function load() {
    document.body.removeEventListener('click', load)
    window.open('https://google.com/', '_blank')
  }

  window.onload = function() {
    document.body.addEventListener('click', load)
  }
</script>

Upvotes: 1

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

A short solution:

<body onclick="myFunction(); this.onclick=null;">

Check it: 

<button onclick="myFunction(); this.onclick=null;">This button works only once</button>
<button onclick="myFunction()">This button works always</button>

<script>

    function myFunction() {
        console.log("hello");
    }

</script>

</body>

Upvotes: 21

Tawfik Khalifeh
Tawfik Khalifeh

Reputation: 949

The below uses an IIFE to create a closure holding the boolean variable and avoid populating global name space, explicitly attach a function to global object window and check if it's the first time the function is fired

function(){
    var firstTime = true;
    window.myFunction = function() {
        if (firstTime){
            firstTime = false;
            window.open("http://www.w3schools.com");
        }
    }
}()

Upvotes: 2

z0mBi3
z0mBi3

Reputation: 1544

There are couple of ways to do it.

1.Add event listener to body in the script and then remove once clicked.

<!DOCTYPE html>
<html>
<body>
<script>
    document.body.addEventListener('click', myFunction);
    function myFunction() {
        window.open("http://www.w3schools.com");
        document.body.removeEventListener('click', myFunction);
    }
    </script>
</body>
</html>

2.Have a flag to check if the function was already called.

<!DOCTYPE html>
<html>
<body onclick="myFunction()">
<script>
    var isBodyClicked = false;
    function myFunction() {
      if(isBodyClicked === false){
        window.open("http://www.w3schools.com");
        document.body.removeEventListener('click', myFunction);
      }
      isBodyClicked = true;
    }
    </script>
</body>
</html>

Upvotes: 10

Related Questions