본문으로 바로가기

[JavaScript] onclick 한번만 실행 로드 하기

로딩중..
2016. 3. 8. 02:11

사실 오늘 라이브리 댓글을 새로 설치하면서 기존의 댓글창과

동시에 사용하고싶어서 토그 형식의 버튼을 만드려고 했습니다.


http://cocosoft.kr/380 - 새로워진 라이브리 소셜댓글 LiveRe(신버전) 소개


라이브리 소셜댓글을 클릭을 하는 사람에게만 스크립트 로드가 되겠금 만드려고 했는데

하지만 문제점이 발생했습니다.

라이브리 소셜댓글 버튼을 누를때마다 라이브리 스크립트가 로드되어서 댓글폼이 계속 생겨버리게 되는 점이죠.


그래서 처음에는 jQuery의 .one() 함수를 사용하려고 했는데..

$('selctor').one("onclick", function(){ });

제가 적용을 잘못한건지.. 외부스크립트로드라서 그런지 몰라도 제대로 로드가 되지 않았습니다.

(.unbind 사용하면 onclick속성을 제거할 수 있다는데 해보지는 않았습니다.)

암튼 hasScript를 사용해봐도 안되고..


구글링을 해봐도 아무리 안나와서 혹시나 네이버를 검색해보니


JavaScript의 onclick으로 한번만 함수를 실행 하게 하는 법을 찾던 중 겨우

onclick의 한번만 실행하게 하는 속성을 찾았습니다.

간단하게 ; this.onclick=null; 속성을 넣어주면 한 번 만 실행이 되었습니다.

onclick 예제 입니다

See the Pen GZoOZx by JCM (@cocosoft) on CodePen.


<input type="button" id="btn" value="누르면 계속" onclick="javascript:alert('누르면 계속 나옴');">

<input type="button" id="btn1" value="한번만1" onclick="javascript:alert('한번만 나옴1'); this.onclick=null;"/> 

<input type="button" id="btn1" value="한번만2" onclick="javascript:alert('한번만 나옴2'); this.onclick='';"/>

<input type="button" id="btn1" value="한번만3" onclick="myFunc(); this.onclick='';"/>

<script>
  function myFunc(){
  alert("한번만 나와요3");
};
</script>

한 번 알아놓으면 많은 곳에 유용하게 사용 될 것 같습니다.