void(0)에 대하여 + 마우스 우클릭 활성화하기

front/javascript
2023. 6. 11.

SHORTCUT

왜 href에 `javascript:void(0)`를 사용할까?

<a href="javascript:void(0);">
	<div>
		...
	</div>
</a>

or
<a href="javascript:undefined;">Main</a>

레거시 사이트들의 소스를 살펴보면 위와 같은 형태로 a태그의 href를 처리한 경우를 볼 수 있다.

왜 a태그에 href="javascript:void(0);"를 사용했을까?

void(0)을 사용하면, undefinded가 반환된다. 즉, 위 코드는 a태그의 고유 동작인 링크 이동을 막기 위함이다.

즉, a태그에 걸어둔 공통 CSS 스타일링을 유지하며 실제 Link 이동을 방지하기 위함이라고 볼 수 있다.

하지만 위에 처럼 a태그의 리다이렉트를 막기 위해 javascript:void(0); 을 처리하게 될 경우, 어떤 문제가 발생할까?

문제 : 마우스 우클릭 액션이 막힌다

마우스 우클릭을 했을 때의 “새탭에서 링크 열기/링크 주소 복사” 기능(액션)은 모두 href의 주소를 기반으로 작동한다.

즉, a태그의 href 링크가 비어져 있어 위 동작을 했을 때. 새탭에선 about:blank#blocked 등의 링크가 열리는 불상사가 발생한다.

담당 서비스에선?

<div class="prod-list">
	<a href="javascript:void(0);" type="B">...</a>
	<a href="javascript:void(0);" type="A">...</a>
	<a href="javascript:void(0);" type="A">...</a>
</div>


// script
$(document).on("click",'.prod-list a',function (event) {
	const type = $(this).attr("type");
	if(type == 'B'){
		window.location.href = "..."
	}else{
		window.location.href = "..."
	}
	...
}

지금 내가 담당하는 서비스에선, href="javascript:void(0);"를 통해 링크 기능은 막은 뒤, 모든 a태그에 클릭 이벤트를 동적으로 부여해, 타입에 따라 링크를 바꾸는 추가적인 작업을 진행한다. (예시 코드 참조)

하지만 위와 같이 할 경우, PC에서 상품마다 우클릭 기능이 제한되어. 효율적인 쇼핑의 경험을 방해하는 요인이 된다. 따라서 마우스의 우클릭을 살리면서, 링크 변환을 수행할 수 있도록 처리가 되어야 한다.

마우스 우클릭 액션을 살리고, a태그의 리다이렉션은 막는 방법

아주 간단하게, event.preventDefault(); 처리를 통해 해결이 가능하다.

마우스 우클릭 액션을 위해, href에 필요한 링크를 삽입한다.

onclick 이벤트 내부에 event.preventDefault() 를 선언하여, a태그의 기본 동작을 막는다.

<div class="prod-list">
	<a href="/100/detail?type=B" type="B">...</a>
	<a href="/101/detail" type="A">...</a>
	<a href="/102/detail" type="A">...</a>
</div>

// script
$(document).on("click",'.prod-list a',function (event) {
	const type = $(this).attr("type");

	event.preventDefault(); // a태그의 기본동작을 방지한다

	// 이동은 아래에서
	if(type == 'B'){
		window.location.href = "..."
	}else{
		window.location.href = "..."
	}
	...
}

event.preventDefault()에 대하여

위 기능에 대해선 아래 포스팅에서 더욱 세부적으로 다뤄보겠다.

sammyDevLog