CSS利用pointer-events防止重復(fù)點(diǎn)擊的方法實(shí)例
前言
我們在前端總會遇到重復(fù)點(diǎn)擊的問題,由于網(wǎng)絡(luò)的原因,用戶不能及時(shí)得到反饋,就很可能會選擇再點(diǎn)擊一次,
所以這個(gè)時(shí)候就會向后端發(fā)送兩次重復(fù)的請求,這樣就很可能會導(dǎo)致嚴(yán)重的問題,尤其是在發(fā) post的時(shí)候,就可能會增加兩條重復(fù)的數(shù)據(jù)。
之前我一般遇到這種情況都會在 js 的請求前做一個(gè) canRequest 變量,由于請求是異步的,所以在請求開始后我就會將該變量設(shè)置為 false, 當(dāng)請求結(jié)束后,無論成功還是失敗都要將該變量設(shè)置為 true, 簡單代碼如下:
var canRequest = true
function postData () {
if (!canRequest) return
fetch(url)
.then(res => {
canRequest = true
})
.catch(e => {
canRequest = true
})
canRequest = false
}
這樣做并沒有什么毛病,不過考慮到一般點(diǎn)擊后還需要將按鈕置灰,所以我找到了個(gè)從 css 層面上就阻止重復(fù)點(diǎn)擊的方式。
下面是個(gè)獲取短信驗(yàn)證碼的示例:
<div id="count">獲取驗(yàn)證碼</div>
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)
}
注意: 對于 pointer-events 不了解的請查看這篇文章
demo鏈接:點(diǎn)擊這里
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
這篇文章主要介紹了CSS pointer-events屬性的使用,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-24
本篇文章主要介紹了css3 pointer-events,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-18使用CSS的pointer-events屬性實(shí)現(xiàn)鼠標(biāo)穿透效果的神奇技巧
當(dāng)pointer-events的值設(shè)置為none之后,瀏覽器將不會獲得鼠標(biāo)在當(dāng)前位置的層上的點(diǎn)擊事件,而造成鼠標(biāo)穿透的效果!下面就來為大家展開講解一下使用CSS的pointer-events屬性實(shí)現(xiàn)2016-06-28- 本文主要介紹了CSS中的pointer-events屬性的用法,十分的詳細(xì),有需要的小伙伴參考下。2015-02-26
CSS的pointer-events屬性詳細(xì)介紹(作用和注意事項(xiàng))
現(xiàn)代瀏覽器里CSS的職責(zé)范圍和JavaScript的越來越模糊分不清。比如CSS里-webkit-touch-callout屬性在iOS里能禁止當(dāng)用戶點(diǎn)擊時(shí)彈出氣泡框2014-04-23css pointer-events屬性實(shí)現(xiàn)下面元素可點(diǎn)擊
是否曾經(jīng)有過這樣的經(jīng)歷:把一個(gè)元素置于另一個(gè)元素之上,而希望下面的那個(gè)元素成為可點(diǎn)擊的?現(xiàn)在,利用css的pointer-events屬性即可做到。2010-04-17
這篇文章主要介紹了css不常見屬性之pointer-events的使用方法的相關(guān)資料,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-27




