javascript:void(0)를 주의해서 사용하세요. 이렇게 작성하는 것이 왜 좋지 않습니까?

문의 버그를 수정하세요. IE6의 경우 "javascript: 세미콜론 없는 의사 프로토콜"의 경우에만 클릭 후 GIF 일시정지 버그가 발생합니다.

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

왜 이렇게 쓰면 안 좋을까요?

다른 관점을 제시해 보겠습니다.

태그에 href 속성을 추가하면 다음을 의미합니다.

:link선택기가 이를 선택할 수 있음

이 태그는 포커스 가져오기(탭 버튼을 눌러 접근 가능)

브라우저의 기본 스타일 시트에서는 href 속성이 있는 즉).

은 onclick 이벤트 의 태그에 바인딩됩니다. 특히 해당 기능이 Ajax 요청인 경우 기본적으로 이 태그가 필요하지 않습니다. 기본 동작 및 연결할 수 없는 실제 페이지에는 일반적으로 CSS에서 이 요소의 커서 및 기타 스타일이 제공됩니다. 이때 href 속성을 다음 항목에 추가해야 합니다.

키보드 이벤트에 응답하고 포커스를 얻도록 합니다(스크린 리더가 뒤에 있는 내용을 읽고 접근성을 향상시킬 수 있도록).

우아한 성능 저하. 네트워크 연결이 좋지 않고 CSS가 로드되지 않은 경우 는 여전히 손 모양과 일반 링크 스타일을 유지합니다.

태그에 href 속성을 부여하고 이를 실제 페이지에 연결하지 않는 방법은 다음과 같습니다.

<a>1.</a><a href="#"></a>
2.<a href="#nogo"></a>
3.<a href="##"></a>
4.<a href="###"></a>
5.<a href="javascript:void(0);"></a>
6.<a href="javascript:void(0)">
7.<a href="javascript:;"></a>
8.<a href="javascript:"></a>

경험이 약간 다릅니다.

1. 이 링크를 클릭하면 페이지가 헤드로 이동하며, window.location.href 끝에 #이 추가됩니다. (window.location.href 끝에 #이 없는 경우) ), onclick 이벤트가 js 기본 이벤트에서 캡처되어 차단되지 않는 한.

2에는 예비 의미가 있습니다. 그러나 페이지에 ID가 nogo인 요소가 있는 경우 링크를 클릭한 후 앵커 메커니즘이 작동하고 페이지가 요소의 위쪽 가장자리에 정렬됩니다. 자세한 내용은 Zhang Xinxu의 "URL Anchor HTML 포지셔닝 기술 메커니즘, 응용 프로그램 및 문제"를 참조하세요.

3은 더 이상 Chrome에서 기본적으로 페이지 헤더로 점프하지 않으며, 4는 더 이상 IE11 페이지 헤더의 페이지 헤더로 점프하지 않습니다. . 아래 테스트를 참조하세요.

5~8은 동일한 기능을 가지고 있지만 JavaScript 의사 프로토콜을 사용합니다. IE6에서는 세미콜론 없이 옵션 6과 8을 클릭한 후 IE6이 페이지에서 gif를 일시 중지하고 onbeforeunload 이벤트를 트리거합니다(자세한 내용은 여기 참조). IE6은 이 페이지에 리디렉션이 있음을 인식하고 모든 요청을 중단합니다. 여기를 참조하세요). 따라서 이후에 의 src를 교체하면 IE6은 새 요청을 전혀 완료하지 않습니다.

저는 옵션 4를 선호합니다.

<a href="javascript:void(0)">와 같은 LZ의 의미론적 사용에 대해서는 여기에 이미 충분한 자세한 답변이 있습니다. 이 상황은 여전히 ​​접근 가능한 애플리케이션을 지원할 수 있다는 점을 덧붙이고 싶습니다. 방법은 "WAI-ARIA 접근 가능한 웹 애플리케이션 속성"을 참조하세요.

업데이트 후 다음 테스트를 수행했습니다.

<p>
           <a href="#">#</a>
       </p>
       <p>
           <a href="##">##</a>
       </p>
       <p>
           <a href="###">###</a>
       </p>
       <p>
           <a href="####">####</a>
       </p>
       <p>
           <a href="#####">#####</a>
       </p>
       <script type="text/javascript">
           var n = 0 ;            window.onhashchange = function(){
               alert(++n) ;
           }        </script>

IE11에서 ###, #### 및 #####을 클릭하면 페이지가 더 이상 맨 위로 이동하지 않습니다.

크롬에서 ##, ###, ####, #####을 클릭하면 더 이상 페이지가 맨 위로 이동하지 않습니다.

그러나 IE11 및 Chrome에서는 모든 를 클릭하면 주소 표시줄이 수정되고 해시변경 이벤트가 실행됩니다.

그래서 앞서 "###은 주소 표시줄이 변경되지 않습니다"라고 말한 것은 잘못된 것입니다.

다른 브라우저에 대한 대규모 테스트는 없습니다. 예비 추측은 다음과 같습니다. ###의 중요성은 문자 수가 가장 적고 페이지 상단으로 이동하지 않는다는 것입니다. 모든 브라우저에서 앵커 포인트.

이 글을 쓰는 데에는 문제가 없습니다. 이 부분이 링크처럼 보이고, 마우스는 손 모양이 필요하고 클릭에 반응해야 하지만 실제 동작은 없다는 의미입니다. href="#"을 대체하는 데 사용됩니다. 이 작성 방식은 본질적으로 HTML과 js가 혼합된 것이 아닙니다.

void(0) 사용 시 주의하세요

# 또는 void(0)를 사용하더라도 공통적인 단점이 있습니다. will 이 동작을 수행하려면 js를 활성화해야 합니다. 웃지 마세요. 대부분의 사람들이 js를 로드하지만 연결 실패와 같은 사고를 배제할 수 없거나 js를 사용하지 않는 미친 사람들이 실제로 몇 명 있습니다. 게다가, js는 검색 엔진에 의해 추적될 수 없는데, 이는 고려해야 할 문제입니다.

【관련 추천】

1.

특별 추천: "php Programmer Toolbox" V0.1 버전 다운로드2.

ie6

3. 연산자 void(0)에 대한 자세한 설명

4. href=javascript:void(0)와 href=#의 차이점 요약

위 내용은 javascript:void(0)를 주의해서 사용하세요. 이렇게 작성하는 것이 왜 좋지 않습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!