...
<script language="JavaScript">
var clickState = null;
function btn_OnClick(e,img){
if(clickState == null){
clickState = setTimeout("btn_OnClick(e,img)", 1000);
}
else{
ClearClickState();
fonclick(e,img);
}
}
function btn_OnDbClick(e,img){
ClearClickState();
fondbclick(e,img);
}
function ClearClickState(){
clearTimeout(clickState);
clickState = null;
}
...
</script>
...
이미지를 더블클릭하면 축소되고 한번 클릭하면 이미지가 확대 됩니다.<br>
<img id ="i" onclick="btn_OnClick(event,this)" ondblClick="btn_OnDbClick(event,this)"
src="media/Tulips.png" width="100" height="100" alt="img">
현재 과제로 실습 9-6번문제를 변형하여 한 오브젝트에 onclick,ondblClick을 이용하여
이미지 확대 축소를 해야합니다.
헌데 강의와 교재에 있는 내용을 잘못이해 했는지 결과가 좋지 않습니다.
하여 제가 제대로 이해하고있는지 그리고 위의 코드에서 고쳐야하는 부분은 뭔지 궁금해서 질문드립니다.
위와같은 코드를 실행시키면 이미지를 한번 클릭 후 fbtn_OnClick(e,img) 함수가 작동된뒤 null값을 갖고있는clickState 가
if 문을 통과하여 setTimeout("btn_OnClick(e,img)", 1000);로 인해 1초뒤 정수를 받게 됩니다.
그리고 다시한번 이미지를 클릭하면 else 결과인 ClearClickState(); fonclick(e,img);가 실행되며 clickState는 타이머가 중지되며 값은 null로 초기화되고
fonclick(e,img);[이미지가 확대되는 함수]가 실행됩니다.
여기 까진 문제가 없지만 더블클릭 시 시간에 관계없이 btn_OnClick(e,img)의 else가 실행됩니다.
위의 코드대로라면 btn_OnClick(e,img)가 한번 실행된후 1초안에 더블클릭을 행하면 btn_OnDbClick(e,img) 함수가 실행되고
clickState의 값을 초기화 시키기 때문에 btn_OnClick(e,img)는 실행중지 되는 것이 아닌가요?
6시간째 해결방법을 몰라 고민중입니다. 답변해주시면 감사하겠습니다.
몇 가지 설명할 부분이 있습니다.
* 첨부된 html파일에서 클릭하면 아래 1번 때문에 바로 오류납니다. 오류를 확인하려면 크롬에서 개발자 도구를 켠 다음에(마우스 오른쪽 버튼 후 검사 메뉴 )실행시켜보세요
1. onclick과 ondblclick를 하나의 객체에 함께 사용하는 것은 부적절합니다.
브라우저마다 조금씩 다를 수 있지만, 더블클릭을 하면 onclick이 먼저 불려지고 다시 ondblclick이 불려집니다.
그래서 클릭 핸들러와 더블클릭 핸들러를 함께 사용하는 것은 그다지 권하지 않습니다.
제가 이 내용을 책에 기술해 놓지 않아서 미안하네요. 책이 너무 백과사전처럼 되는 것 같아서 이런 수준의 이야기는 뺐습니다.
개정할 때는 넣어두어야 겠습니다.
2. 타이머를 등록하는 함수에 문제가 있습니다.
질문하시분은 아래와 같이 등록하면
;
function btn_OnClick(e,img){
clickState = setTimeout("btn_OnClick(e,img)", 1000);
}
매개변수로 넘어온 e와 img가 그대로 "btn_OnClick(e,img)"의 e와 img에 전달된다고 생각하는것 같습니다.
그런데 "btn_OnClick(e,img)"은 보이는 그대로 문자열입니다. 그러니까 매개변수로 넘어온 e와 img를 평가하여 그 값이 전달되지 않습니다.
"btn_OnClick(e,img)" 이 문자열 상태로 그대로 타이머가 기억하였다가.
btn_OnClick(e,img)을 실행합니다. 그러면 이때 e, img라는 변수 값이 무엇인지 모르겠다고 자바스크립트 엔진은 오류를 발생시킵니다.
그래서 클릭하여도 프로그램은 작동안하게 됩니다.
만일 다음과 같이 하였다면 어떻게 될까요?
function test(x, y){
clickState = setTimeout("z = x + y", 1000);
}
test(2,4);
test(2,4)가 호출되면 타이머 핸들러로 "z = 2 + 4"가 등록되는 것이 아니라, 그냥 "z = x + y"가 등록됩니다.
그리고 1초후에 z = x + y를 실행하려고 하지요. 그리고 이 때 변수 x와 y를 찾으려고 할텐데 이 순간에 x와 y 값을 합하여 z 값이 결정됩니다.
그래서 타이머에는 변수등의 매개변수를 가진 함수 호출문을 사용하지 않아야 합니다.
이것도 제가 책에 넣지 못했네요. 설명이 복잡하여 이 자체로 이해하는데 어려움이 있을 것 같아서였습니다......