Uncaught RangeError: Maximum call stack size exceeded 해결

프로트엔트 작업중 javascript를 사용하다가 특이한 점을 발견하게 되었다.

위지위그 에디터를 만드려고 작업중에 글자색과 배경색을 설정하는 버튼을 만들던 중 발견한 오류다.

 

위지위그 에디터를 만들 때 색을 선택하는 부분이 필요한데 다른 사람이 만들어둔 것 보다는 input type="color"(이하 #fontColor)를 이용하여 만들어 보려던 시도를 하고 있었다.

엑셀처럼 버튼 아래에 색을 밑줄로 넣고 싶은데..

<div id="btnFontColor">
	C
</div>
<input type="color" id="fontColor" value="#FF0000">

이렇게 #btnFontColor와 #fontColor가 따로 되어 있던 것을 약간 숨겨서 "C" 아래에 슥 넣어보았다.

모양은 대충 성공 했는데 100번 클릭해도 colorpicker는 안나오고 오류만 남

<div id="btnFontColor">
	<div>C</div>
	<div style="사이즈를 설정하고 overflow:hidden; 함"><input type="color" id="fontColor" value="#FF0000"></div>
</div>

 

이렇게 #fontColor의 일부를 가렸더니 문제가 생겼다.

아래의 JS에서 오류가 나기 시작한 것이다..;

 

// jquery를 사용하는 조건입니다.

$('#btnFontColor').on({
	click: function() {
		$('#fontColor').click();
	}
});

망..

찾아보니 $('#fontColor')[0].click(); 을 사용하면 오류가 나타나지 않는다고 한다;

// jquery를 사용하는 조건입니다.

$('#btnFontColor').on({
	click: function() {
		$('#fontColor')[0].click();
	}
});

휴;

바꾸니까 잘됨..ㅠㅠ)b