>웹 프론트엔드 >JS 튜토리얼 >javascript:void(0)_javascript 기술 사용에 대한 토론

javascript:void(0)_javascript 기술 사용에 대한 토론

WBOY
WBOY원래의
2016-05-16 17:24:24966검색

페이지를 만들 때 링크를 클릭한 후 아무것도 하지 않거나 클릭에 대한 응답으로 다른 작업을 완료하려면 해당 속성을 href = "#"로 설정하면 됩니다. 그러나 페이지에 스크롤이 있는 경우 문제가 발생합니다. bar. 클릭하면 페이지 상단으로 돌아가는데 이는 사용자 경험이 좋지 않습니다.

현재 여러 가지 해결 방법이 있습니다.
1) 링크를 클릭한 후 아무것도 하지 마세요

코드 복사 코드는 다음과 같습니다:

test test
test //2~4개의 #을 사용하세요. 대부분은 "####"이지만 " #all도 있습니다. " 등

2) 링크 클릭 후 사용자 정의 클릭 이벤트에 응답

코드 복사 코드는 다음과 같습니다.
test a href ="#" onclick="doSomething();return false;">브라우저 비호환성 문제를 포함한 모든 문제가 해결되었습니다 //또는 href=""
test


설명:
1.javascript:void(0) 이 의사 프로토콜은 작성되어야 합니다. 웹 표준 관련 서적을 좀 읽어보신 분이라면 그 이유를 아실 것입니다. (이해가 안가서 원문만 발췌해서 임시로 녹음하겠습니다)
2. 링크(href)에 javascript:void(0)을 직접 사용하면 IE에서 다음과 같은 문제가 발생할 수 있습니다. gif 애니메이션 재생이 중단되는 등의 현상이 발생하므로 가장 안전한 방법은 "####"을 사용하는 것입니다. 링크를 클릭한 후 페이지 상단으로 이동하는 것을 방지하기 위해 onclick 이벤트가 false를 반환할 수 있습니다.
3. 마우스를 위로 움직여 손 모양으로 바꾸고 싶다면


을 사용하여 코드를 복사하세요 코드는 다음과 같습니다.
Click Me! >
void는 자바스크립트의 연산자로, 표현식만 실행되고 반환값이 없다는 의미입니다.
void 연산자 사용 형식은 다음과 같습니다.



코드 복사
코드는 다음과 같습니다. javascript:void(표현식) javascript:void 표현식

좋은 프로그램 스타일을 위해서는 괄호와 함께
의 두 번째 유형을 사용하는 것이 좋습니다. void 연산자를 사용하여 javascript:void(document.form.submit())와 같은 하이퍼링크를 지정할 수 있습니다. 표현식은 평가되지만 현재 문서에 아무것도 로드되지 않습니다. void(0)는 0으로 평가되지만 JavaScript에는 영향을 미치지 않습니다. 즉, .
핵심은 void가 javascipt 자체의 연산자라는 점을 아는 것입니다. 즉, 표현식만 실행되고 반환 값이 없다는 뜻입니다!

게다가 "#"의 기본 조준점 위치가 상단이기 때문에 페이지가 자동으로 상단으로 돌아가게 되어 이런 일이 발생합니다.