a태그 막는 방법

a href="#" << 이렇게 a 태그 안에 연결할 링크가 없을 때 #을 넣어놓으면
a의 기본동작으로 홈페이지의 최상단으로 이동하게 된다.

처음에는 a의 동작을 막는 것이 있는줄 모르고.. 내가 html 구조를 잘못 짠 줄 알고 뜯어고친 기억이 있다...

1. 자바스크립트에서 막는 방법

function preventDefault() {
  const links = document.querySelectorAll('a[href="#"]');
  links.forEach(function(element) {
    element.addEventListener('click', function(e) {
      e.preventDefault();
    }, false);
  });
}

일반적으로 쓰는 방법이라고 들었다!_!

그런데 이방법을 사용하면 버블링 형식을 막는 코드를 넣었을 때 실행이 되지 않게 되는 현상이 발생한다!_!

또한 이 코드는 항상 최상단에 있어야 한다.

2. HTML 에서 막는 방법

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

a에 하나 하나 자바스크립트 코드를 넣어주거나,
#옆에 a 나 ; 와 같은 다른 문자를 넣어준다!

이 방법은 a의 특성을 막는 것이 아니기 때문에 추천 하는 코드!