2015/12/18

IE 8 버전에서 onchange 이벤트 이상 작동 // Internet Explorer 8, onclick, checkbox, event, JavaScript

1. 구글 크롬과 IE 9 버전 이상에서는 잘 되는 onchange가 IE 8 버전에서는 오동작!

<input type="checkbox" id="my_check" onchange="checkFunc()"/>

체크박스의 설정 값이 변경되는 것을 받아서 처리하려고 요렇게 해놨더니,

IE 8 버전에서는 체크박스의 값을 변경해도 checkFunc()이 발동 안됨. -.-;;


2. IE 8 버전 이하에서는 onchange 발동 타이밍이 다르다!?

검색을 해보니,

IE 8 버전 이하에서는 체크박스, 라디오 등의 값을 변경한 후에

해당 요소에서 focusout, blur 등이 발생해야 onchange 이벤트가 발생하게 된다고 함.

(input 등에 onchange를 걸어놓은 거는 다 그릉가봉가 -o-a)


여하튼 문제의 페이지를 다시 살펴 보니, 체크박스 값을 변경한 다음에 다른 어딘가를 클릭하면 checkFunc()이 실행됨. ㅋㅋ.. 이게 뭐냐 ㅠ.ㅠ


3. 그렇다면 원하는 대로 해주마!

진리의 stackoverflow의 해법을 따라서...

체크박스에 클릭이 될 때마다 별도로 focus 이벤트를 처리해 줌.

// IE8 버전을 위해서 focus를 놔줬다가 가져옴 ㅋ

function checkFixIE8() {
 this.blur();  
 this.focus();  
}


를 추가하고

<input type="checkbox" id="my_check" onclick="checkFixIE8()" onchange="checkFunc()"/>

요렇게 수정.

기존 onchange 관련 부분은 살려두고 문제를 해결한다는 면에서 바람직한 듯!? -o-a

- onchange on radiobutton not working correctly in IE8 ( http://stackoverflow.com/questions/10579019/onchange-on-radiobutton-not-working-correctly-in-ie8 )


4. 기타

- 위의 방식으로 처리를 했더니 IE8 버전에서도 정상적으로 작동이 되기는 하는데, 화면이 전체적으로 깜빡거림 ㅠ_ㅠ;;; focus만 나갔다 오는데도 뭔가 무지막지한 처리가 되는 듯. ㄷㄷㄷㄷ


댓글 없음:

댓글 쓰기