利用pointer-events防止重複點擊的方法執行個體

我們在前端總會遇到重複點擊的問題，由於網路的原因，使用者不能及時得到反饋，就很可能會選擇再點擊一次，所以這個時候就會向後端發送兩次重複的請求，這樣就很可能會導致嚴重的問題，尤其是在發 post的時候，就可能會增加兩條重複的資料。本文主要給大家介紹了關於CSS利用pointer-events防止重複點擊的相關資料，文中通過範例程式碼介紹的非常詳細，對大家的學習或者理解具有一定的參考學習價值，希望能協助到大家。

之前我一般遇到這種情況都會在 js 的請求前做一個 canRequest 變數，由於請求是非同步，所以在請求開始後我就會將該變數設定為 false， 當請求結束後，無論成功還是失敗都要將該變數設定為 true, 簡單代碼如下：

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

這樣做並沒有什麼毛病，不過考慮到一般點擊後還需要將按鈕置灰，所以我找到了個從 css 層面上就阻止重複點擊的方式。

下面是個擷取簡訊驗證碼的樣本：

<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.textContentcount.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)}