submit이나 button에 동작이 걸려있는 경우, 여러번 클릭했다가 동작이 여러번 처리되는 경우가 종종 발생합니다.
간단하게 버튼이 한 번만 눌릴 수 있게 하는 방법을 소개하겠습니다.
<!DOCTYPE>
<HTML>
<HEAD>
<TITLE> 중복클릭방지! </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
</HEAD>
<BODY>
<form name="form">
<input type="submit" id="button1" value="등록" onclick="OnlyOneClick();">
</form>
</BODY>
<script>
var once = true; // 최초 1회
function OnlyOneClick() {
if (once) {
once = false; // 1회 들어오고 그 다음은 막는다.
return true; // 최초 1회 return 은 true
} else {
return false; // 2회 부터 false
}
}
var id = document.getElementById('button1');
id.addEventListener('click', function () {
var ooc = OnlyOneClick(); // 1회에는 true 를 return 받고 그 다음은 false
if (ooc) {
console.log('입장');
} else {
//alert("이미 등록 되었습니다.")
console.log('입장불가')
document.getElementById('button1').disabled = true;
}
})
</script>
</HTML>자바스크립트에서 'button1' 이라는 id를 가진 버튼이 한 번만 눌리더라도 바로 비활성화되게 처리하였습니다.
(ps. 오래 전에 어느 블로그에서 참고하여 회사 사이트에 적용한 로직인데 블로그를 찾지 못하였읍니다 ㅜㅜ)
'Programming > Javascript' 카테고리의 다른 글
| setTimeout 함수와 페이지 자동 이동 (0) | 2022.02.23 |
|---|