[jQuery] click(), focusin() 이벤트 충돌

[jQuery] click(), focusin() 이벤트 충돌

<a href="#" class="btn"></a>
<ul class="menu" style="display: none;">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

.btn을 클릭 시, .menu리스트가 나오는 방식이다.

이 때, .btn에 click이벤트와 focusin이벤트를 같이 걸어주면 충돌이 일어난다.

// jQuery
// 클릭이벤트 먼저 실행!
$('.btn').on('click', function(e) {
  console.log(e.type);
  if($('.menu').css('display') === 'none') {
    $(this).next('ul').css({display: 'block'});
  } else {
    $('.menu').css({display: 'none'});
  }
}).on('focusin', function(e) {
  console.log(e.type);
  $('.menu').css({display: 'block'});
});

 

❌ 문제

1. click 이벤트가 먼저 발생해야 하는데 focusin이 먼저 발생하여 순간적으로 block되었다가 none이 되는 현상이 발견된다.
2. focusin 말고 focus도 위와 같이 발생된다.

 

🤦‍♀️ 시도

1. focusin으로 해줬던 이유는 focusout을 따로 발생시킬 코드가 있었다.
2. focus도 똑같이 먼저 발생.
3. e.preventDefault() , e.stopPropagation()을 써서 버블링을 막아도 안됨.
4. $('.btn').off('click focusin')을 해도 안됨.

 

⭕️ 해결

• click 대신 mousedown 이벤트를 사용한다.
• mousedown 다음 focusin이 발생되어 해결되었다.