[JavaScript] blur event ios 적용불가

💥blur event error

blur 이벤트는 요소의 focus가 해제 될 때 발생한다.
하지만 ios일 경우 blur 이벤트가 작동되지 않는다.
다른 요소를 터치해도 focus가 계속 유지 되기 때문이라고 이해하긴 했는데🤔

더 정확한 이유는 아래 내용 참고
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

그.런.데!
ios 운영체제에서 mouseout 이벤트를 blur와 비슷하게 인식한다고 한다.

이전 코드

toggleBtn.addEventListener('blur', () => {
    menu.classList.remove('active');
});

원래는 이랬던 코드를

수정한 코드

toggleBtn.addEventListener(isIos === true ? 'mouseout' : 'blur', () => {
    menu.classList.remove('active');
});

삼항연산자를 활용하여 이렇게 수정해주니 ios에서도 오류없이 blur가 잘 작동하게 되었다. 사실 이 코드가 잘 작동될려면 먼저 운영체제가 무엇인지 확인 해주어야 한다.

변수 추가

const isIos = /iPhone|iPad|iPod/i.test(navigator.userAgent);

변수 선언까지 추가 해주니 진짜 완료~
아직 이 코드는 이해하지 못해서
운영체제 확인하는 건 또 공부를 해야 할 것 같다.....ㅎㅠ