티스토리 뷰
발생일: 2009.08.25
문제:
픽셀드로우의 캔버스 작업 중에 툴을 간편하게 바꾸게 하기 위해 단축키 이벤트 핸들러를 만들었다.
예상했던 대로 툴이 잘 변경되는데,
제목과 내용 칸에 글자를 입력할 때에도 이벤트 핸들러가 적용돼 툴이 바뀌어 버린다.
해결책:
처음엔 마우스 포지션의 위치를 파악해서 캔버스 위에 있을 때에만
단축키 이벤트가 적용되도록 할까 했었는데, 왠지 비효율적일 것 같다는 생각이 들었다.
또한 각각의 브라우저에서 어떤 element에도 포커스가 가지 않았을 때의,
이벤트 타겟을 찾아보니 역시나 모두 달랐다.
IE 는 마지막으로 클릭한 element. 만약 element가 선택되지 않았다면 BODY, BODY의 밖을 클릭했었다면 HTML.
FF 는 HTML 이 표시되고, 크롬은 BODY, 사파리도 BODY 가 타겟이 된다.
좀 쉽게 생각해볼까...
글을 입력하는 칸은 input 과 textarea 밖에 없다.... 오호...
이벤트 발생 시 이벤트의 target의 tagName 을 잡아서,
INPUT 또는 TEXTAREA 일 경우 바로 리턴되도록 수정했다.
if (e.target.tagName == 'INPUT' || e.target.tagName == 'TEXTAREA') {
return;
문제:
픽셀드로우의 캔버스 작업 중에 툴을 간편하게 바꾸게 하기 위해 단축키 이벤트 핸들러를 만들었다.
예상했던 대로 툴이 잘 변경되는데,
제목과 내용 칸에 글자를 입력할 때에도 이벤트 핸들러가 적용돼 툴이 바뀌어 버린다.
해결책:
처음엔 마우스 포지션의 위치를 파악해서 캔버스 위에 있을 때에만
단축키 이벤트가 적용되도록 할까 했었는데, 왠지 비효율적일 것 같다는 생각이 들었다.
또한 각각의 브라우저에서 어떤 element에도 포커스가 가지 않았을 때의,
이벤트 타겟을 찾아보니 역시나 모두 달랐다.
IE 는 마지막으로 클릭한 element. 만약 element가 선택되지 않았다면 BODY, BODY의 밖을 클릭했었다면 HTML.
FF 는 HTML 이 표시되고, 크롬은 BODY, 사파리도 BODY 가 타겟이 된다.
좀 쉽게 생각해볼까...
글을 입력하는 칸은 input 과 textarea 밖에 없다.... 오호...
이벤트 발생 시 이벤트의 target의 tagName 을 잡아서,
INPUT 또는 TEXTAREA 일 경우 바로 리턴되도록 수정했다.
if (e.target.tagName == 'INPUT' || e.target.tagName == 'TEXTAREA') {
return;
}
반응형
댓글
공지사항