CTRL+CLICK 하면 현재 탭에서도 링크 이동하는 문제 해결 방법

들어가며

회사에서 만든 웹사이트에서 a 태그를  ctrl+click 하면 새탭이 열림과 동시에 현재 탭도 해당 링크로 이동하게 되는 현상이 있었다. 사수가 언젠가 해결해달라며 가볍게 넘겼지만 그냥 지금 하고 싶어서... 문제를 해결하기 위해 하루정도 꼬박 헤맸던 거 같다... 근데 해결이 돼서! 너무 뿌듯해서! 글을 쓰려고 한다 ㅎㅎ

 

문제

서론에서 언급했듯이  a 태그 ctrl+click 하면 현재 탭도 해당 링크로 이동하게 되는 문제이다.

 

해결 방법

기본 동작을 방지하는 쪽으로 생각을 해봤다.

클릭 이벤트가 발생하면 event.preventDefault() 를 통해 기본 동작을 막으면 해결될 거라고 생각했다.

그러나 생각보다 굳게 막혀있는 레거시 코드라서 그런가 ...? 하하 생각처럼 잘 해결되지 않았다.

파일도 많고 코드 양도 많으니 어디서 뭐가 잘못된지 모르겠다...

 

그래서 다른 쪽으로 생각을 해봤는데 이게 잘 생각해보면 현재 탭이 부모이고, 새로운 탭이 자식인데 자식의 이벤트가 부모한테 전파가 된 거 아닐까? 싶었다.

그래서 event.stopPropagation() 이벤트 전파 방지를 걸었다. 

근데 여기까지만 해주면  새 탭에서 링크 열리는 것까지 막힌다.

window.open(link.href, '_blank') 그렇기 때문에 _blank 속성을 줘서 새 탭에서 열리는 동작까지 실행해줘야한다.

 

해결한 코드는 아래와 같다.

jQuery(window).on('load', function() { 
	document.querySelectorAll('.page-sidebar .menu a').forEach(function(link) {
        link.addEventListener('click', function(event) {
            if (event.ctrlKey || event.metaKey) {
                event.preventDefault();
				event.stopPropagation();
				window.open(link.href, '_blank');
            }
        });
    });
});

 

마치며

결국 이렇게 문제가 해결되었다... 말로 표현하니까 생각보다 간단한데...! 이걸 하루 꼬박 잡고 있었으니ㅠㅠ

근데 사실 이게 적합하고 옳은 방식인지 모르겠다. 왜냐면 기본 동작을 방지하고 이벤트 전파를 방지하는 거니까 혹시나 기존 동작 방식을 해치는 작업이 될까봐 걱정되기 때문이다. 추후에 문제가 생길 수도 있을까봐ㅠㅠ 

그래서 아직 코드 리뷰를 받진 못했지만... 내가 해결한 방식을 기록해두자는 의미로...!

 

나중에 코드리뷰 받으면서 조언을 얻고 새로운 방식을 알게 된다면 다시 글을 정리해서 올리려고 한다!