Examples of ways to prevent repeated clicks with pointer-events

We always encounter the problem of repeated click on the front end, because of the network, the user can not get feedback in time, it is likely to choose to click again, so this time will be back to send two repeated requests, which is likely to lead to serious problems, especially when the post is sent, It is possible to add two duplicate data. This paper mainly introduces the use of CSS pointer-events to prevent repeated click on the relevant data, the text through the sample code introduced in very detailed, to everyone's learning or understanding has a certain reference learning value, hope to help everyone.

Before I usually encounter this situation will be in the JS request to make a canrequest variable, because the request is asynchronous, so I will set the variable to false after the request, when the request ends, regardless of success or failure to set the variable to True, 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 I've found a way to prevent repeated clicks from the CSS level, considering that the button is grayed out after the general click.

Here's an example of getting a text verification code:

<p id= "Count" > Get Verification Code </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.textContentcount.onclick = e = {    Console.log ( 111)    Count.classList.add (' disable ')    count.textcontent = ten    var id = setinterval (() = {        count.textcontent--        if (count.textcontent <= 0) {            count.classList.remove (' Disable ')            Count.textcontent = Tip            clearinterval (id)        }    }, 1000)}