본문 바로가기
Web

[Web] A 태그(Ahchor) 에서의 href, onclick 사용

by Real Iron 2019. 2. 27.

안녕하세요. 이번에는 프로그래밍 관련 게시글을 하나 적어볼까 합니다. 아래 문제는 아주 오래전에 겪어봐서 알아두었던 건데 최근에 깜빡하고 다시 똑같은 실수를 범해서 그냥 다시 한번 참고차 남겨두려는 의미에서 포스팅을 해봅니다.

A 태그로 javascript function 을 호출하는 방법은 2가지가 있습니다.

<a href="javascript:callFunction();">javascript function</a>
<a href="javascript:void(0);" onclick="callFunction();">onclick function</a>

물론 위 처럼 그대로 다 적어두지 않고 bind 로 click 이벤트를 주도록 하는 등의 코딩이 가능 하겠지만 일반적으로는 위 처럼 쓰일 것입니다. 이렇게 ​A 태그에서 함수 호출 시 href 로 사용하는 방법과 onclick 을 사용하는 방법이 있는데 만약 href 로 사용 시 자기 자신을 지칭하는 this 가 전달되지 않습니다. 

아래 코드를 보며 확인해 보도록 하겠습니다.

function callFunction(obj) {
console.log($(obj).attr('attr-'a'));
}

<a href="javascript:callFunction(this);" attr-a="onclick : attr-a">javascript function</a>
<a href="javascript:void(0);" onclick="callFunction(this);" attr-a="onclick : attr-a">onclick function</a>


결과 : 
javascript function -> undefined
onclick function -> onclick : attr-a

위 처럼 ​href 로 함수 호출 시 자기 자신의 object 를 찾지 못해 undefined 를 표시하게됩니다. 하지만 onclick 을 사용하면 정상적으로 자기 자신 this 가 인식되어 attr-a 를 표시하게 됩니다.


결론 : ​앵커태그에서 함수 호출 시 자기 자신 객체를 전달 시에는 href 가 아닌 onclick 을 사용하면 될 것 같습니다.



-- 추가적인 내용

A 태그에서 <a href="javascript:callFunction();">click</a> 와 같이 쓰는 방법은 ​javascript pseudo protocol 등의 이름으로 불리우는데 하이퍼링크(href) 에서 자바스크립트를 호출하기 위해 만들어 진 것​이라고 합니다. 이와 같은 사용법은 해당 ​pseudo protocol 방식을 지원하는 브라우저에서만 지원하며 만약 javascript 의 기능을 off 시에는 동작하지 않는다고 합니다. ​(현재 대부분의 브라우저에서는 사용이 가능하다죠?)

하지만 페이지 이동을 위해서 만들어진 A 태그에서 어쩔 수 없이 함수를 호출해야 하는 경우는 빈번 하실 겁니다. 아래 2가지 예제에 대한 문제를 확인해 보고 해결 방법에 대해 설명해 보도록 하겠습니다.


---------------------------------------------------------------------------------------------
예제 1. 이벤트 버블링

<a href="#" onclick="callFunction();">call function</a>

문제점 :
위와 같이 onclick 으로 함수호출 시 함수 호출 후 이벤트 버블링으로 인해 anchor 를 타서 브라우저 상단으로 이동해 버리는 문제가 있습니다.

해결방법 :
피연산자를 실행하되 ​피연산자에서 처리된 값을 무시하고 무조건 undefined 를 return 하게 해주는 void 함수를 사용하여 코딩을 할 수가 있다.

<a href="javascript:void(0);" onclick="callFunction();">call function</a>

하지만 이 방법의 경우 ​특정 브라우저에서 페이지 이동이 되지 않는 문제가 야기​된다고 하므로 이와 같이 사용하도록 해야 합니다. (검색 결과 IE6 에서 그렇다고 하네요. 그 이후부터는 정상동작 한다고 합니다.)

<a href="javascript:void(0);" onclick="callFunction(); return false;">call function</a>
또는 
<a href="#" onclick="callFunction(); return false;">call function</a>

이렇게 ​onclick 이벤트에 return false; 를 추가하게 되면 javascript:# , javascript:void(0); 어떠한 것을 사용해도 상관 없다고 합니다.


---------------------------------------------------------------------------------------------
예제 2. pseudo protocol 사용 함수에 return 처리 시

function callFunction() {
console.log('call function');
return true;
}

<a href="javascript:callFunction();">call function</a>

문제점 :
익스프롤러와 파이어폭스의 경우 ​Anchor 태그에 의해 실행된 자바스크립트 함수가 undefined 이외의 값을 리턴하게 되면 url 로 간주하여 페이지를 이동시켜버립니다. 

해결 :
​자바스크립트 함수는 브레이스({}) 혹은 return; 을 만났을 때는 아무것도 return 하지 않게 하는 undefined 를 리턴합니다. 
그러므로 함수를

function callFunction() {
console.log('call function');
}

와 같이 변경하여 사용하시거나 또는 

<a href="javascript:callFunction();" onclick="return false;">call function</a>

처럼 사용해도 해결 가능 할 것입니다.

출처: https://thingsthis.tistory.com/130 [여행과 일상]