[자바스크립트] javascript로 더블클릭 막기(중복클릭 방지)

「 자바스크립트 : 중복 클릭 이벤트 막기 」

---

 

 

 

특정 submit버튼이나 이미지, 링크 등을 클릭 발생으로 인한 어떤 이벤트 처리를 할 수 있는데 경우에 따라서는 이것을 중복(더블)클릭했을 때 문제가 되는 경우도 있습니다. 클릭으로 인한 함수가 한 번만 실행되어야 하는데 중복클릭으로 인하여 두 번 이상 실행되면 오동작을 일으킬 수 있습니다.

​

이와 같이 원치 않는 동작을 막기 위한 더블클릭을 막는 방법은 아래와 같이 여러가지가 있습니다.

​

[중복클릭을 무력화하는 4가지 방법]
​
1) 자바스크립트로 disabled 처리하는 방법
2) 제이쿼리로 disabled 처리하는 방법
3) confirm() 메세지를 이용한 방법
4) 클릭체크 변수를 활용한 방법

​

이번 포스팅에서는 마지막 4번째 방법인 클릭체크 변수를 이용하여 중복 클릭을 차단하는 방법의 예제를 소개해 드리겠습니다.

 

var doubleClickFlag = false;

function mySubmit(){
  if(doubleClickFlag){
	return;
  }else{
    doubleClickFlag = true;
    //submit처리
    setTimeout("doubleClickFlag = false;", 5000);
  }
}

먼저 doubleClickFlag 변수를 false로 세트해 놓고

mySubmit() 함수가 call되면 doubleClickFlag의 상태에 따라 분기처리를 하게 됩니다.

처음 클릭에서는 doubleClickFlag가 false이므로 즉시 doubleClickFlag를 true로 바꾼 후 sumbit처리를 하고 5초후에 다시 doubleClickFlag를 false로 초기화시켜 줍니다.

​

위 예제를 실무에 적용하여 중복 클릭으로 인한 오류를 수정할 수 있었습니다.

 

 

추가로, confirm()을 이용한 중복 클릭 방법 예제를 소개해 볼게요.

function mySubmit(){
  if(confirm('처리할까요?')){
	// submit처리
  }else{
    return;
  }
}

​

confirm()은 원래 어떤 처리에 앞서 사용자에게 메세지를 띄워서 사용자의 선택에 따라 다른 처리를 하게끔 하는 게 목적이지만 부수적으로 중복클릭도 막아주는 역할도 해 줍니다.

메세지를 띄우면서 중복클릭을 막아도 된다면 confirm()을 이용하는 편이 더 간단할 수 있으니 필요에 따라 선택해 사용하시면 되겠습니다.

​

​

오늘은 javascript를 이용한 중복 클릭을 막는 방법 예제를 알아보았습니다.

​

감사합니다.