포인터 이벤트를 사용하여 반복 클릭을 방지하는 방법의 예

우리는 항상 프런트 엔드에서 반복 클릭 문제에 직면합니다. 네트워크상의 이유로 사용자가 제때 피드백을 받을 수 없으면 다시 클릭할 가능성이 높으므로 이때 두 번의 반복 요청이 백으로 전송됩니다. 특히 게시물 전송 시 중복된 데이터 2개가 추가될 수 있어 심각한 문제가 발생할 가능성이 높습니다. 이번 글은 반복 클릭을 방지하기 위해 포인터 이벤트를 활용한 CSS 관련 정보를 주로 소개하고 있으며, 모두의 학습이나 이해에 도움이 될만한 참고 자료가 되길 바랍니다.

과거에는 이런 상황이 발생하면 일반적으로 js 요청 전에 canRequest 변수를 만들었습니다. 요청이 비동기식이므로 요청이 끝나면 성공 여부를 확인하기 위해 변수를 false로 설정했습니다. 또는 실패하면 변수를 true로 설정합니다. 간단한 코드는 다음과 같습니다.

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

이것에는 문제가 없지만 클릭 후 버튼이 회색으로 표시되어야 한다는 점을 고려하여 반복 클릭을 방지하는 방법을 찾았습니다. CSS 수준에서.

다음은 SMS 인증 코드를 받는 예입니다.

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

관련 권장 사항:

a: 액티브 플러스 애니메이션 클릭 잘못된 솔루션

css3 파급 효과를 표시하려면 클릭

JS 링크 클릭 숨겨진 콘텐츠 표시로 전환 구현 방법

위 내용은 포인터 이벤트를 사용하여 반복 클릭을 방지하는 방법의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!