Examples of methods to prevent repeated clicks using pointer-events

We always encounter the problem of repeated clicks on the front end. Due to network reasons, if the user cannot get feedback in time, he is likely to choose to click again, so at this time, two repeated requests will be sent to the back end. This is likely to cause serious problems, especially when posting, two pieces of duplicate data may be added. This article mainly introduces you to the relevant information about CSS using pointer-events to prevent repeated clicks. The article introduces it in great detail through sample code. It has certain reference learning value for everyone's learning or understanding. I hope it can help everyone.

Before I encountered this situation, I usually made a canRequest variable before the js request. Since the request is asynchronous, I would set the variable to false after the request started. When the request ended , the variable must be set to true regardless of success or failure. The simple code is as follows:

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

There is nothing wrong with this, but considering that the button generally needs to be grayed out after clicking, I found a How to prevent repeated clicks from the css level.

The following is an example of obtaining the SMS verification code:

<p id="count">获取验证码</p>

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.textContent
count.onclick = e => {
    console.log(111)
    count.classList.add('disable')
    count.textContent = 10
    var id = setInterval(() => {
        count.textContent--
        if (count.textContent <= 0) {
            count.classList.remove('disable')
            count.textContent = tip
            clearInterval(id)
        }
    }, 1000)
}

Related recommendations:

a: Solution to invalid click of active plus animation

css3 click to display ripple special effect

JS click link to switch to display hidden content implementation method

The above is the detailed content of Examples of methods to prevent repeated clicks using pointer-events. For more information, please follow other related articles on the PHP Chinese website!