Prevent any clicking on the page for a brief period of time following the execution of a function

Question

Prevent any clicking on the page for a brief period of time following the execution of a function

After clicking a div, an image appears and the user can click the image to hide it. To prevent the user from accidentally closing the image while waiting for it to appear, I want to disable all clicks on the page for a few seconds after the div is clicked.

My approach involves using JavaScript to handle the show/hide functionality of the image.

function showCard(element) {
          var id = element.id;
          var image = document.getElementById(id);
          var container = document.getElementById("cards");    


          if (image.style.display === "none") {
            image.style.display = "block";  
            container.style.display = "block";  

            } else {
            image.style.display = "none";
            container.style.display = "none";
            }
        }

I've successfully implemented a similar feature for a button in the past, but I'm unsure how to disable clicks when it's not a button.

Any advice on how to achieve this would be greatly appreciated. Thank you in advance!

javascript

Answer 1

Answer №1

To control the frequency of clicks on certain elements, you can use a boolean variable in the click event handlers. This variable can determine whether the click should be allowed or not. For example, in the scenario below, clicking on the red box will change its color, but you can only do so once per second.

let allowClicks = true;

document.getElementById('main').addEventListener('click', (e) => {
if(allowClicks) {
  e.target.style.background = e.target.style.background === 'red' ? 'blue' : 'red';
    allowClicks = false;
  setTimeout( () => allowClicks = true ,  1000 );
  } 
});

html, body, #blo {
  height: 100%;
}

#main {
  width: 100%;
  height: 100%;
}

<div id="main" style="background: red"></div>

Answer 2

To control the frequency of clicks on certain elements, you can use a boolean variable in the click event handlers. This variable can determine whether the click should be allowed or not. For example, in the scenario below, clicking on the red box will change its color, but you can only do so once per second.

let allowClicks = true;

document.getElementById('main').addEventListener('click', (e) => {
if(allowClicks) {
  e.target.style.background = e.target.style.background === 'red' ? 'blue' : 'red';
    allowClicks = false;
  setTimeout( () => allowClicks = true ,  1000 );
  } 
});

html, body, #blo {
  height: 100%;
}

#main {
  width: 100%;
  height: 100%;
}

<div id="main" style="background: red"></div>

Prevent any clicking on the page for a brief period of time following the execution of a function

Answer №1

Similar questions

What is the best way to retrieve the Axios response using Express?

Displaying dynamic content in JavaScript using Galleria module

Increasing Taxes and Boosting the Overall Cost

"Implementing drag and drop functionality in Vue.js without the need for a

Creating dynamic HTML elements with bound JSON data

Encountered an error with Aurelia webpack 4 when trying to load a necessary CSS file during runtime

Clicking on a JQuery element triggers an AJAX function, although the outcome is not aligned with the intended

Redux - Preventing Overwriting of Product Quantity in Cart by Creating a New Object

Explanation requested for previous response about returning ajax data to the parent function

Popovers in Bootstrap 4 do not have clickable Custom Forms

Making an Ajax request to trigger a method within a controller

List of nested objects converted into a flat array of objects

Modifying text dynamically in AngularJS by cycling through an array of strings

Create a composition of several debounce promises in JavaScript

Develop a dynamic button using JavaScript to fetch information from an array

What could be causing my ES6 code to fail compilation post npm install?

The feature of determining if an edge exists, within the dagre-d3/graphlib,

retrieval: unspecified information obtained through body parsing (Node.js Express)

Choose2 - Dynamic search with auto-complete - keep track of previous searches

Ways to delete a CSS attribute with jquery