쉬프트, 컨트롤 클릭 시 새탭, 새창 띄우지 않기 (Shift+Click, Ctrl+Click do not open new tabs/windows)

- 쉬프트 (Shift), 컨트롤 (Ctrl), 알트 (Alt) 키 누른채로 레이어 띄우기

안녕하세요. 오늘은 쉬프트, 컨트롤, 알트 키를 누른채로 클릭하여 레이어 창을 띄우는 법을 메모하고자 합니다.

보통의 브라우저들에서 앵커태그를 쉬프트, 컨트롤 키를 누르고 클릭 시 새탭, 새창으로 뜨게 되는데요,

이 새탭, 새창 이벤트를 무시하고 싶은 경우에 사용하시면 되겠습니다.

그냥 아무것도 안 누르고 클릭 하면 되지 뭐하러 하느냐... 하시면 할 말이 없는데요.

한 가지 예를 들자면 ..

사이트 관리자의 경우 레이어 팝업에서 자신만이 식별 할 수 있는 어떠한 정보를 확인하고자 할 때 사용될 수 있습니다.

바로 소스 코드로 확인해 보겠습니다. 

$(function() {

$('.btn').on('click', function(event) {

// pressed shift

if (event.shiftKey) {

// do something

}

// pressed ctrl

if (event.ctrlKey) {

// do something

}

// pressed alt

if (event.altKey) {

// do something

}

// pressed with shift and ctrl

if (event.shiftKey && event.ctrlKey) {

// do something

}

// prevent browser default event

event.preventDefault();

// do open layer popup

});

});

<a href="#" class="btn">Open Layer</a>

평소 보시던 코드들과 별다른 점이 없어 보입니다. 네, 크게 다른 것은 없구요 중요한 포인트 몇 개만 짚어보도록 하겠습니다.

1. 앵커태그의 href="#"

보통 위의 소스 처럼 앵커태그 클릭 시 함수를 호출하여 그 함수 내에서 레이어 팝업을 띄우는 방법이 대다수 일 것입니다.

그렇게 함수를 호출하여 레이어 팝업을 띄울 시에 앵커태그의 href attribute 의 값은 href="javascript:앵커태그함수호출();" 이지 않는 이상

함수 호출 후 화면 최상단으로 올라가지 않기 위해서 href="javascript:void(0);", href="#;" 처럼 코딩이 되어 있을 것입니다.

여기서 중요한 것이 href="#;" 를 할 경우에는 Internet Explorer 에서는 Ctrl 클릭이 무조건 새탭으로 띄워진다는 것입니다.

그렇기 때문에 href 의 값은 href="#" 또는 href="javascript:void(0);" 처럼 코딩이 되어야 할 것입니다.

2. event.preventDefault();

1번의 문제점의 연장선 입니다. 브라우저의 기본 이벤트를 막는 preventDefault(); 가 선언되어 있지 않는 다면 레이어 함수 호출 후 

화면이 상단으로 휙~ 올라 갈 것입니다. 

* 참고 1

href="#" 이 붙으면 event.preventDefault(); 가 무조건 선언이 되어야 하는데 만약 이게 싫으시다면

<a href="javascript:void(0);" class="btn"> 

으로 코딩하시면 모든 문제 해결과 함께 event.preventDefault(); 선언도 생략 가능하다는 것을 말씀드리고 싶네요!

* 참고 2

href="#" 은 hash 기호로써 해당 #의 뒤에 오는 문자열의 id 를 찾아가기 위해 많이 사용되며

javascript:void(0); 은 스크립트로 의미없는 함수 void(0); 을 undefined 값을 뽑아내어 해당 링크를 정상적으로 수행하지 못하게 하는 기능을 합니다.

void(0); 을 콘솔에 입력해 보시면 undefined 값을 보실 수 있겠습니다. (void(1), void(2) 마음에 드시는 걸로 뭐 아무거나..)

* 참고 3

만약 <a href="#" onclick="openLayer();"> 형식으로 onclick 을 사용하셨다면 openLayer() 함수 안에서는 window.event.ctrlKey, window.event.shiftKey 등으로 키 코드를 찾으시면 되겠습니다.

그럼 글 마무리 하도록 하겠습니다!