HTML a href tag with onclick return

# HTML a href tag with onclick return 가장 간단하게 HTML a (anchor/닻) tag 를 사용하는 방법은 ``` <a target="_blank" href="URL link ([ex] http:, file:, ftp:, mailto:) or URL fragment ([ex] sub-path, #hash)">link or #hash text</a> ```/ 와 같다. 그런데 간혹 이 링크를 다르게 처리하고 싶을때도 있다. (페이지 새로고침 없이 ajax 로 처리한다던지, pop-up 을 하고 싶다던지, stopPropagation 을 필요로 한다던지 등.) 이땐 다른 html element 들에서도 사용되는 onclick attribute 를 써주면 되는데, 아래와 같은 것들에는 주의가 필요하다고 한다.

JavaScript recommendations
It is often the case that an anchor tag is used with the onclick event. In order to prevent the page from refreshing, href is often set to either "#" or "javascript:void(0)". Both of these values can lead to some unexpected errors when copying links and opening links in a new tab and/or window. Be aware of this for usability reasons, and when users do use anchor tags and you prevent default behavior.

길게 설명은 귀찮고, onclick 자체가 return 값을 받을 수 있어서 링크를 열지 열지말지도 프로그래밍적으로 판단할 수 있게된다. 사용은 아래와 같이 ``` <a target="_blank" href="link or #hash" href="" onclick="return doSomething(this.href, ...)">link or #hash</a> ```/ return 값을 가지는 javascript function 을 그냥 넣으면 안되고, 항상 "return" 을 포함시켜서 써줘야 함. 아래는 여러가지 예제들. ## TOC ## 기본적인 <a> tag examples href 만을 가지는 a tag : http://www.example.com/ ```<a href="http://www.example.com/">http://www.example.com/</a>```/

새 창에서 링크를 열게 해주는 a tag with target : http://www.example.com/ ```<a target="_blank" href="http://www.example.com/">http://www.example.com/</a>```/

:: span element with id="hash-example" Hash 로 이동 : #hash-example ```<a href="#hash-example">#hash-example</a>```/ ## Pop-up 으로 link 열기 Pop-up 으로 link 열기 : http://www.example.com/ ``` <a href="http://www.example.com/" onclick="popUp(this.href); return false;">http://www.example.com/</a> <script> popUp=function(href) { window.open(href, "_blank", 'width=600,height=400,resizable=yes,scrollbars=yes'); }; </script> ```/ ## 그냥 click 과 wheel click 구분해서 처리하기 그냥 click 일땐 javascript 로 처리 (ajax 로 내부적으로 처리한다던지) 하고, wheel click 일땐 그냥 링크를 새창에 여는것처럼 작동하도록 하려면. (여러 브라우저들의 기본 설정에서 a href link 를 wheel click 하는거 자체가 "현재 페이지는 그대로 놔두고, 새창/새탭에서 링크열기" 역할을 함.) 그냥 click 과 wheel click 구분해서 처리하기 : http://www.example.com/ (그냥 click 일때는 링크는 열지않고 alert 만 띄우고, wheel click 일때는 링크만 열고 alert 가 안뜨도록 해놓음.) ``` <a href="http://www.example.com/" onclick="return someFunction(vars, event)">http://www.example.com/</a> <script> someFunction=function(vars, e) { if (e?.which===2) { // 2 for wheel click return true; // Open href link. } else { // do something. alert("You clicked~!"); return false; // Do not open href link. } }; </script> ```/ ## Testing returning async function in onclick async function 은 return 뒤에도 return true 를 다시한번 반환하는건지 alert 이후 링크가 열림. 테스트: /entry/pure-SEE. ```[.linenums.lang-html] <script> asyncFn=async function(e) { if (e?.which===2) { // 2 for wheel click return true; // Open href link. } else { // do something. alert("You clicked~!"); return false; // Do not open href link. } }; </script> <a href="/entry/pure-SEE" onclick="return asyncFn(event)">/entry/pure-SEE</a> ```/ ### () => {} 도 쓸 수 있을까? https://recoeve.net/account/log-in?goto=%2Fuser%2Fkipid%3Fcat%3D%255BMusic%252FBreak%255D--K-Pop%26PRL%3D0.80%26PRR%3D1.00%23headPlay&lang=ko Wheel click 은 감지를 못하는듯. ```[.linenums.lang-html] <a href='https://recoeve.net/account/log-in?goto=%2Fuser%2Fkipid%3Fcat%3D%255BMusic%252FBreak%255D--K-Pop%26PRL%3D0.80%26PRR%3D1.00%23headPlay&lang=ko' onclick="return (function (e, href) {if (e?.which === 2) { alert('You clicked this link~!'); return false; } else { alert('You clicked this link~!'); window.location.href=href; return false; }})(event, this.href)">https://recoeve.net/account/log-in?goto=%2Fuser%2Fkipid%3Fcat%3D%255BMusic%252FBreak%255D--K-Pop%26PRL%3D0.80%26PRR%3D1.00%23headPlay&lang=ko</a> ```/ ## RRA

1. MDN - <a> - HTML (HyperText Markup Language)
2. [여행과 일상:티스토리] :: A 태그(Ahchor) 에서의 href, onclick 사용, 2017-01-19
3. Mouse click 들 (left, right, wheel, wheel up, wheel down, back, forward) 구분해내기