Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how CSS uses pointer-events to prevent repeated clicks". In daily operation, I believe many people have doubts about how CSS uses pointer-events to prevent repeated clicks. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "how CSS uses pointer-events to prevent repeated clicks". Next, please follow the editor to study!

Preface

We always encounter the problem of repeated clicks at the front end. Because of the network, users will probably choose to click again if they can't get feedback in time.

So twice repeated requests are sent to the backend at this time, which is likely to cause serious problems, especially when sending post, which may add two duplicate pieces of data.

In the past, when I encountered this situation, I would make a canRequest variable before the js request. Since the request is asynchronous, I will set this variable to false after the request starts. When the request ends, the variable will be set to true regardless of success or failure. The simple code is as follows:

Var canRequest = truefunction postData () {if (! canRequest) return fetch (url) .then (res = > {canRequest = true}) .catch (e = > {canRequest = true}) canRequest = false}

There's nothing wrong with this, but considering that buttons usually need to be grayed out after clicking, I've found a way to prevent repeated clicks at the css level.

The following is an example of obtaining SMS verification code:

Get the verification code body {display: flex; height: 100vh;} # count {margin: auto; padding: 10px; width: 100px; border: 1px solid; text-align: center; cursor: pointer; border-radius: 4px;} .disable {pointer-events: none; color: # 666 } const count = document.getElementById ('count') const tip = count.textContentcount.onclick = e = > {console.log (111) count.classList.add (' disable') count.textContent = 10 var id = setInterval (() = > {count.textContent-- if (count.textContent)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.