[JavaScript] Safari에 blur 이벤트가 안 먹을 때!

크롬이나 안드로이드에서는 addEventListener의 blur 이벤트가 잘 됐으나 safari에서 blur 이벤트가 안 되는 이슈가 발생했다.
pc, ios의 모든 safari에서 발생한 이슈였다.

원인은 MDN에 따르면 blur는 포커스를 잃으면 이벤트가 발생한다. 하지만 사파리는 클릭시 버튼 요소에 초점이 없어서 blur 이벤트가 먹지 않았던 것으로 추측된다.

그렇기 때문에 해결 방법은 click 이벤트를 줬을 때 focus를 주는 것이다!

const button = document.querySelector('button');

button.addEventListener('click', (e) => {
	button.classList.toggle('is-active);
    e.target.focus();
}
button.addEventListener('blur', (e) => {
	button.classList.remove("is-active");
}

이런식으로 사용하였더니 클래스 삭제가 잘됨~!!!!!!!