Javascript disable function after 1 click

I read more than 10 articles, I tried many codes but I did not find a solution, so this is my code I want to disable this function after 1 click

<script type="text/javascript">
window.onclick = MyPopUpLink;
function MyPopUpLink() {
  document.getElementsByTagName("body")[0] = window.open("https://google.com");
};
</script> 

Please, this may be similar to many other articles but I could not find a solution, so please help me. Thank You

6 answers

  • answered 2018-11-08 07:45 CertainPerformance

    Use addEventListener instead, and you can attach the listener with a once option, which means it will only run once:

    document.addEventListener('click', () => {
      window.open("https://google.com");
    }, { once: true });
    

    (Cannot embed snippet due to SO's sandboxing issues, but you can see it on JSFiddle here)

    Note that it's much easier to refer to document.body than to getElementsByTagName("body")[0], and assigning a window.open to document.body won't do anything useful.

  • answered 2018-11-08 07:47 HuntsMan

    just do re-assignment.

    window.onclick = function() {
     document.getElementsByTagName("body")[0] = window.open("https://google.com");
     window.onclick = ""
    };
    

  • answered 2018-11-08 07:48 Dacre Denny

    You can achieve this by defining a function that handles the open window behaviour, and then binding that function to the click event for the document's body element.

    To prevent the event from firing a second time, call:

    document.body.removeEventListener('click', onClickBody);
    

    from within the handler to "deregister" that click event which prevents the popup behaviour from being executed on subsequent clicks:

    function onClickBody() {
      
      // Cannot call this in snippet
      // window.open("https://google.com");
      alert('window.open("https://google.com");')
      
      // Remove this event handler to prevent the event handler from being
      // fired again on subsequent body clicks
      document.body.removeEventListener('click', onClickBody);
    }
    
    document.body.addEventListener('click', onClickBody);
    Body fires click once

  • answered 2018-11-08 07:51 Fitzi

    You can add an event listener that fires once with the native "addEventListener" like this:

    document.body.addEventListener('click', function(){
        // your code here
    }, { once:true })
    

    You can read more about addEventListener and its options here: https://developer.mozilla.org/de/docs/Web/API/EventTarget/addEventListener#Syntax

    If you wan't to achieve the same behaviour with jquery (you tagged your post so), there is the "one" function: http://api.jquery.com/one/

    You use it like this

    $(document.body).one('click', function(){
        // your code here
    })
    

  • answered 2018-11-08 07:53 Jelle Botman

    One option is to create a variable that updates after the function is runned for the first time.(this works for any function)

    <script type="text/javascript">
       var enabled = true;
       window.onclick = MyPopUpLink;
       function MyPopUpLink() {
            if(enabled == true){
              document.getElementsByTagName("body")[0] = window.open("https://google.com");
              enabled = false;
            }
       };
    </script> 
    

    The other option is to use addEventListener event without any function.
    But this works for events only.

    document.addEventListener('click', () => {
        window.open("https://google.com");
    }, {once: true});
    

    You could also use the inline event onclick="MyPopUpLink()"

  • answered 2018-11-08 10:38 Muhazzib UD-din Farooqui

    Try this snippet.

    let counter1=0;
    window.onclick = MyPopUpLink;
    function MyPopUpLink() {
    if(counter1===0){
      document.getElementsByTagName("body")[0] = window.open("https://google.com");
      counter1++
    }
    }