마우스 중복 클릭 막기

중복 클릭으로 인해 가장 많이 발생하는 문제는 폼을 전송할 때 클릭이 2번 이상 발생하면서, 폼이 2번 전송되어 2중으로 저장되는 경우입니다.

사용자는 클릭을 한번 했지만 2번 클릭한 것으로 인식될 수도 있고, 사용자가 실수로 더블클릭을 했을 수도 있습니다.

중복 클릭을 막는 방법은 여러가지가 있습니다.

그중 이벤트 리스너를 이용해 중복 클릭을 막는 방법을 알아보겠습니다.

var saveBtn = document.querySelector("#savebtn");saveBtn.addEventListener("click", function (e) {    this.setAttribute("disabled", "disabled");    //폼 서밋});

이렇게 하면 버튼 클릭시 첫번째 버튼 클릭시 버튼이 "disabled" 되면서 이후 클릭 이벤트에 반응하지 않게됩니다.

그외에 알아두면 좋은 자바스크립트 중복 체크 방법들로는

confirm() 메시지 창으로 중복 클릭 차단

function clickSubmit(){    if(confirm('저장하시겠습니까?')){        //폼서밋    }else{        return;    }}

클릭 체크 변수로 중복 클릭 차단

let submitFlag = false;
function submitCheck(){    if(submitFlag){        return submitFlag;    }else{        submitFlag = true;        return false;    }}
function clickSubmit(){if(submitCheck()){return;}    //폼서밋}