href =“javascript :”vs. href =“javascript : void (0)”
웹 앱은 완전히 브라우저에서 렌더링됩니다.
서버는 JSON 메시징을 통해서만 브라우저와 통신합니다.
결과적으로 앱에 대해 단일 페이지 만 필요하며 대부분의 모든 <a>태그에는 href다른 페이지를 실제로 가리키는 것이 없습니다 .
불필요한 것들을 제거하기위한 탐구 void(0)에서 쓸모없는 것처럼 보이는 우리 코드에서 우리가 가진 무수한 것을 제거 할 수 있는지 궁금합니다 .
<a onclick="fn()">Does not appear as a link, because there's no href</a>
<a href="javascript:void(0)" onclick="fn()">fn is called</a>
<a href="javascript:" onclick="fn()">fn is called too!</a>
사용 href="javascript:"이 문제를 일으킬 수 있는지 아는 사람이 있습니까?
IE7에서도 작동합니다 ...
인라인 자바 스크립트가 템플릿 엔진에 의해 생성되기 때문에 나쁘다는 것을 알려주기 위해 귀중한 시간을 보내지 마십시오. :)
문제를 일으키지는 않지만 똑같이하는 트릭입니다. PreventDefault
페이지와 앵커에서 다음과 같이 아래로 내려갈 때 :
<a href="#" onclick="fn()">click here</a>
당신은 상단으로 이동되고 URL 앵커를해야합니다 #뿐만 아니라이 우리가 단순히 피하기 위해 return false;또는 사용을javascript:void(0);
당신의 예에 관하여
<a onclick="fn()">Does not appear as a link, because there's no href</a>
그냥 a {text-decoration:underline;}하면 "같은 링크"가 생깁니다.
<a href="javascript:void(0)" onclick="fn()">fn is called</a>
<a href="javascript:" onclick="fn()">fn is called too!</a>
괜찮지 만 function결국 return false;에는 기본 동작을 방지하기 위해 더 이상 아무것도 할 필요가 없습니다.
javascript:내비게이션에서 사용할 때 실행 된 스크립트의 반환 값이 있으면 브라우저에 표시되는 새 문서의 내용이됩니다. voidJavaScript 의 연산자는 뒤에 오는 표현식의 반환 값이 undefined 를 반환하도록 하여이 작업이 발생하지 않도록합니다. 직접 시도해보고 다음을 주소 표시 줄에 복사 한 다음 Return을 누르십시오.
javascript:"hello"
결과는 "hello"라는 단어 만있는 새 페이지입니다. 이제 다음으로 변경하십시오.
javascript:void "hello"
...아무 반응이 없습니다.
javascript:독자적으로 작성하면 스크립트가 실행되지 않으므로 해당 스크립트 실행의 결과도 undefined 이므로 브라우저는 아무 작업 도 수행 하지 않습니다. 이것은 다음을 다소 동등하게 만듭니다.
javascript:undefined;
javascript:void 0;
javascript:
undefined 는 같은 이름의 변수를 선언하여 재정의 할 수 있다는 점을 제외하고 . 의 사용 void 0은 일반적으로 무의미하며 기본적으로 void functionThatReturnsSomething().
다른 사람들이 언급했듯이 프로토콜을 return false;사용하는 것보다 클릭 핸들러에서 사용하는 것이 더 좋습니다 javascript:.
'javascript : void 0'을 사용하면 IE에서 문제가 발생합니다.
링크를 클릭하면 창의 onbeforeunload 이벤트 가 발생합니다 !
<!doctype html>
<html>
<head>
</head>
<body>
<a href="javascript:void(0);" >Click me!</a>
<script>
window.onbeforeunload = function() {
alert( 'oops!' );
};
</script>
</body>
</html>
이 방법은 jQuery 이벤트로 onclick을 설정하면 모든 브라우저에서 괜찮아 보입니다.
<a href="javascript:;">Click me!</a>
앞에서 말했듯이 href = "#"는 URL 해시를 변경하고 History (또는 ba-bbq) JS 플러그인을 사용하는 경우 데이터 다시 /로드를 트리거 할 수 있습니다.
당신은 그들 모두를 만들 수 있습니다 #.
그런 다음 return false;페이지가 맨 위로 점프하지 않도록 앵커의 onclick이라고하는 함수의 끝에 추가해야합니다 .
나는 일반적으로 href를 사용하지 않고 CSS로 측면을 변경하여 링크처럼 보입니다. 따라서 애플리케이션의 이벤트 핸들러를 제외하고는 링크 효과에 대해 전혀 걱정할 필요가 없습니다.
a {
text-recoration: underline;
cursor: pointer;
}
모든 클릭 이벤트가 a href링크 로있는 이유는 무엇 입니까?
If instead you use span tags with :hover CSS and the appropriate onclick events, this will get around the issue completely.
javascript:void(0); --> this executes void function and returns undefined. This could have issues with IE. javascript:; --> this does nothing. safest to create dead links. '#' --> this means pointing to same DOM, it will reload the page on click.
참고URL : https://stackoverflow.com/questions/3666683/href-javascript-vs-href-javascriptvoid0
'programing' 카테고리의 다른 글
| .py 확장자없이 파이썬 모듈 가져 오기 (0) | 2020.12.05 |
|---|---|
| 파일 시스템은 동시 읽기 / 쓰기를 어떻게 처리합니까? (0) | 2020.12.05 |
| 실행하기 전에 CMake 인쇄 명령 만들기 (0) | 2020.12.05 |
| Google 테스트는 C 코드를 테스트해도 괜찮습니까? (0) | 2020.12.05 |
| IE7에서 Google +1 버튼이 작동하지 않나요? (0) | 2020.12.05 |