CSS运用pointer

日期:2020-12-12 类型:科技新闻 

关键词:如何创建网站,免费网站建站,网站建设文章,网站建设7个基本流程,自动建站

序言

大家在前端开发总会遇到反复点一下的难题,因为互联网的缘故,客户不可以立即获得意见反馈,就极可能会挑选再点一下1次,

因此这个情况下就会向后端开发推送两次反复的恳求,这样就极可能会致使比较严重的难题,特别是在发 post的情况下,便可能会提升两条反复的数据信息。

以前我1般遇到这类状况都会在 js 的恳求前做1个 canRequest 自变量,因为恳求是多线程的,因此在恳求刚开始后我就会将该自变量设定为 false, 当恳求完毕后,不管取得成功還是不成功都要将该自变量设定为 true, 简易编码以下:

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

这样做并沒有甚么问题,但是考虑到到1般点一下后还必须将按钮置灰,因此我寻找了个从 css 层面上就阻拦反复点一下的方法。

下面是个获得短消息认证码的示例:

<div id="count">获得认证码</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连接:点一下这里

总结

以上便是这篇文章内容的所有內容了,期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助,假如有疑惑大伙儿能够留言沟通交流,感谢大伙儿对脚本制作之家的适用。