[JavaScript] 더블 클릭 이벤트 방지[JavaScript] 더블 클릭 이벤트 방지

Posted at 2018. 12. 29. 17:32 | Posted in JavaScript & jQuery/JavaScript
반응형




참고 : http://cofs.tistory.com/270




해당 코드는 제목대로 사용자의 더블 클릭 이벤트가 발생하였을 경우 예외처리가 가능하다.


그렇지만 윈도우 바탕화면의 실행 아이콘을 더블 클릭하는것과 같이.


빠르게 더블 클릭하는것을 예외 처리하는 코드가 아니라는것을 우선 밝혀두는 바이다.


그저 그런 이벤트를 막기위한 한가지 꼼수라고 생각하고 포스팅을 보길 바란다.







■ 짝수 클릭의 경우 예외 처리하기




특정 이벤트 실행시 더블 클릭을 방지하기 위해서 제작되었다.


위 코드의 원본은 http://cofs.tistory.com/270 포스팅을


현재 필자가 진행한 프로젝트에 맞게 수정한 내용이다.




해당 코드를 사용시 주의할 점이 존재하기에 우선 그 부분을 먼저 설명하고자 한다.


# 주의사항


      ① 진짜 더블 클릭을 예외처리하는 코드가 아니다,

         실제로는 짝수번째의 클릭시 이벤트를 막는다.


      ② 해당 기능은 한 페이지에서 하나의 이벤트만이 수행 가능하다.

         복수의 이벤트에서 사용하려면 추가적인 로직을 구현하는 작업이 필요하다.





# 소스 코드

<html>
<head>
<title>:: JAVASCRIPT 더블 클릭 방지 ::</title>
<script type="text/javascript">

  // 시작과 동시에 선언될 익명 선언식 함수를 사용한다.
  // 익명 선언식 함수를 사용한 이유는
  // doubleFlag 변수를 전역으로 사용하는것을 피하기 위해서다.
  (function() {

    // doubleFlag는 처음에 false로 초기화 한다.
    var doubleFlag = false;

    // 더블 클릭 함수 생성
    this.doubleCheck = function doubleCheck() {
      if(doubleFlag == true) {
        return doubleFlag;
      } else {
        doubleFlag = true;
        return false;
      }
    }

    // 더블 클릭된 이벤트가 발생이후 다시 버튼을 초기화 하기 위해 사용된다.
    this.clickInitial = function clickInitial() {
      doubleFlag = false;
    }
  })();

  // 클릭 이벤트
  function clickSubmit() {

    // 더블 클릭한 경우
    if(doubleCheck() == true) {

      alert("2번클릭");


      // 다시 정상적으로 클릭이벤트가 발생 할 수 있도록 초기화 요청
      clickInitial();
      return;
    }

    // 한번만 클릭한 경우
    else {
      alert("1번클릭");
    }
  }


</script>
</head>
<body>

    <h3>더블 클릭 이벤트 예외 처리하기</h3>

    <input type="button" onClick="clickSubmit();" value="검사"/>
</body>
</html>



# 출력 결과






반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 시간이 AM 혹은 PM인지 확인하기  (0) 2019.01.22
[JavaScript] 날짜 자동 포맷 함수  (0) 2019.01.11
[JavaScript] JavaScript 테스트 방식  (0) 2018.12.25
[JavaScript] 자바스크립트에서의 Test Suite  (0) 2018.12.25
[JavaScript] Password 형식 검사하기  (1) 2018.10.24
//

티스토리툴바