it-gundan.com

자바 스크립트 링크에 ​​"href"값을 사용해야하나요, "#"또는 "javascript : void (0)"?

다음은 JavaScript 코드를 실행하는 유일한 목적을 가진 링크를 작성하는 두 가지 방법입니다. 기능, 페이지로드 속도, 유효성 검사 목적 등의 측면에서 어느 것이 더 낫습니까?

function myJsFunc() {
    alert("myJsFunc");
}
<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>

또는

function myJsFunc() {
    alert("myJsFunc");
}
 <a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>
3863
2cBGj7vsfp

나는 javascript:void(0)을 사용한다.

세 가지 이유. 개발자 팀에서 #를 사용하도록 유도하면 필연적으로 다음과 같은 함수의 반환 값을 사용하게됩니다.

function doSomething() {
    //Some code
    return false;
}

하지만 그들은 onclick에서 return doSomething()을 사용하는 것을 잊고 그냥 doSomething()을 사용합니다.

#를 피하는 두 번째 이유는 호출 된 함수가 오류를 throw하면 마지막 return false;가 실행되지 않는다는 것입니다. 따라서 개발자는 호출 된 함수에서 오류를 적절히 처리하는 것을 기억해야합니다.

세 번째 이유는 onclick 이벤트 속성이 동적으로 할당되는 경우가 있기 때문입니다. 필자는 함수를 호출하거나 동적으로 할당 할 수있는 기능을 선호합니다. 특히 첨부 또는 다른 메소드 중 하나의 메소드에 대해 함수를 특별히 코딩하지 않아도됩니다. 따라서 HTML 마크 업에서 내 onclick (또는 무엇이든)은 다음과 같습니다.

onclick="someFunc.call(this)"

OR

onclick="someFunc.apply(this, arguments)"

javascript:void(0)을 사용하면 위의 두통을 피할 수 있으며 단점을 발견하지 못했습니다.

따라서 독창적 인 개발자라면 분명히 자신 만의 선택을 할 수 있습니다. 그러나 팀으로 일하면 다음 중 하나를 진술해야합니다.

href="#"를 사용하고, onclick에 항상 return false;가 포함되어 있는지 확인하십시오. 호출 된 함수는 오류를 발생시키지 않으며 함수를 onclick 속성에 동적으로 연결하면 오류를 throw하지 않고 false을 반환합니다.

OR

href="javascript:void(0)" 사용

두 번째는 분명히 의사 소통이 훨씬 쉽습니다.

2091
AnthonyWJones

둘 다 아니야.

그 URL을 HREF로 사용하는 것이 바람직한 실제 URL을 가질 수 있다면. 누군가가 귀하의 링크를 중간 클릭하여 새 탭을 열거 나 자바 스크립트를 비활성화 한 경우에는 onclick이 실행되지 않습니다.

그렇게 할 수 없다면 최소한 자바 스크립트 및 해당 클릭 이벤트 핸들러가있는 앵커 태그를 문서에 삽입해야합니다.

나는 이것이 항상 가능하지는 않다는 것을 알고 있지만, 제 의견으로는 공개 웹 사이트를 개발하는 데 노력해야합니다.

눈에 거슬리지 자바 스크립트and점진적 향상(위키피디아 모두).

1251
Aaron Wagner

onclick 특성이 포함 된 <a href="#" onclick="myJsFunc();">Link</a> 또는 <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> 또는 다른 작업을 수행하는 것은 5 년 전으로해도 좋았지 만 지금은 좋지 않을 수 있습니다. 이유는 다음과 같습니다.

  1. 그것은 관리하기 어렵고 확장하기 어려운 것으로 판명 된 탁월한 JavaScript의 실행을 촉진합니다.눈에 잘 띄지 않는 JavaScript.

  2. 엄청나게 지나치게 자세한 코드를 작성하는 데 시간을 소비하고 있습니다.이 코드는 코드베이스에 거의 도움이되지 않습니다.

  3. 이제 원하는 결과를 달성하는 데있어보다 쉽고, 쉽고, 유지 보수가 용이하고 확장 가능한 방법이 있습니다.

눈에 잘 띄지 않는 JavaScript 방식

href 속성을 전혀 사용하지 마십시오! 좋은 CSS 재설정은 누락 된 기본 커서 스타일을 처리하므로 문제는되지 않습니다. 그런 다음 마크 업 대신 자바 스크립트 로직이 자바 스크립트로 유지 될 때 유지 보수가 용이하고 우아하고 눈에 거슬리지 않는 모범 사례를 사용하여 자바 스크립트 기능을 첨부하십시오.이 기능은 로직을 분할해야하는 대규모 자바 스크립트 애플리케이션을 개발할 때 필수적입니다. 블랙 박스 구성 요소 및 템플릿.Large-scale JavaScript Application Architecture

간단한 코드 예제

// Cancel click event
$('.cancel-action').click(function(){
    alert('Cancel action occurs!');
});

// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on('hover','a',function(){
    $(this).toggleClass('hover');
});
a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cancel-action">Cancel this action</a>

블랙 박스백본 .js

Scalable, blackboxed, Backbone.js 구성 요소 예제의 경우 -이 작업 jsfiddle 예제는 here를 참조하십시오. 눈에 잘 띄지 않는 JavaScript 사례를 활용하는 방법에 주목하십시오. 적은 양의 코드에는 여러 구성 요소 인스턴스간에 부작용이나 충돌없이 페이지 전체를 여러 번 반복 할 수있는 구성 요소가 있습니다. 놀랄 만한!

노트

  • href 요소에 a 특성을 생략하면 tab 키 탐색을 사용하여 요소에 액세스 할 수 없게됩니다. 이러한 요소가 tab 키를 통해 액세스 가능하도록하려면 tabindex 특성을 설정하거나 대신 button 요소를 사용할 수 있습니다.Tracker1의 answer에서 설명한대로 버튼 요소를 일반 링크처럼 보이도록 쉽게 스타일 할 수 있습니다.

  • href 요소에 a 특성을 생략하면 Internet Explorer 6Internet Explorer 7a:hover 스타일을 사용하지 않게되므로이 대신 a.hover를 통해 간단한 JavaScript 심이 추가되었습니다. 완벽하게 괜찮습니다. href 속성이 없어도 정상적인 성능 저하가없는 것처럼 링크가 작동하지 않습니다. 걱정할 큰 문제가 있습니다.

  • JavaScript가 비활성화 된 상태에서 작업을 계속 수행하려면 a 요소와 함께 href 특성을 사용하여 Ajax 요청이나 이동해야 할 작업을 수행하는 대신 수동으로 작업을 수행 할 일부 URL로 이동하십시오. 이 작업을 수행하는 경우 클릭 클릭시 event.preventDefault()을 수행하여 버튼을 클릭하면 링크를 따르지 않도록해야합니다. 이 옵션을 정상적인 성능 저하라고합니다.

758
balupton

'#'는 사용자를 페이지의 맨 위로 가져올 것이므로 일반적으로 void(0)을 사용합니다.

javascript:;javascript:void(0);처럼 작동합니다.

302
Adam Tuttle

나는 정직하게도 어느 것도 제안하지 않을 것이다. 나는 그 행동을 위해 양식화 된 <button></button>를 사용할 것입니다.

button.link {
  display: inline-block;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
  color: #00f;
  text-decoration: underline;
  font: inherit;
}
<p>A button that looks like a <button type="button" class="link">link</button>.</p>

이렇게하면 onclick을 지정할 수 있습니다. 또한 요소 태그에 onclick 특성을 사용하지 않고 스크립트를 통해 바인딩하는 것이 좋습니다. 유일한 장애는 비활성화 할 수없는 구형 인터넷 익스플로러에서 가짜 3D 텍스트 효과입니다.


_ _A 요소를 사용해야하는 경우 이미 언급 한 이유로 javascript:void(0);을 사용하십시오.

  • Onclick 이벤트가 실패 할 경우 항상 차단됩니다.
  • 잘못된로드 호출이 발생하지 않거나 해시 변경을 기반으로 다른 이벤트를 트리거하지 않습니다.
  • 해시 태그는 클릭이 넘어지면 (onclick throw) 예측할 수없는 동작을 일으킬 수 있으며, 적절한 비 충돌 동작이 아니고 탐색 기록을 변경하려는 경우가 아니면이를 피할 수 있습니다.

참고 : 0javascript:void('Delete record 123')과 같은 문자열로 바꿀 수 있습니다.이 문자열은 클릭이 실제로 수행 할 작업을 나타내는 추가 표시기로 사용할 수 있습니다.

244
Tracker1

첫 번째는 이상적으로 사용자가 JavaScript를 사용할 수없는 경우를 대비 한 실제 링크가있는 것입니다. JavaScript가 실행되면 click 이벤트가 발생하지 않도록 false를 반환하십시오.

<a href="#" onclick="myJsFunc(); return false;">Link</a>

Angular2를 사용하면 다음과 같이 작동합니다.

<a [routerLink]="" (click)="passTheSalt()">Click me</a>.

여기를 참조하십시오 https://stackoverflow.com/a/45465728/2803344

136
Zach

네가 나에게 묻지 않는다.

"링크"가 일부 JavaScript 코드를 실행하는 유일한 목적 인 경우 링크로 적합하지 않습니다. JavaScript 함수가 결합 된 텍스트 조각입니다. <span> 태그와 함께 onclick handler 태그를 사용하고 기본 CSS를 사용하여 링크를 활성화하는 것이 좋습니다. 링크는 탐색을 위해 만들어지며 JavaScript 코드가 탐색 용이 아닌 경우 <a> 태그가되어서는 안됩니다.

예:

function callFunction() { console.log("function called"); }
.jsAction {
    cursor: pointer;
    color: #00f;
    text-decoration: underline;
}
<p>I want to call a JavaScript function <span class="jsAction" onclick="callFunction();">here</span>.</p>
95
fijter

이상적으로 이것을 할 수 있습니다 :

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

또는 HTML에서 기본 동작 링크를 사용하고 DOM 렌더링 후에 JavaScript를 통해 눈에 띄지 않게 onclick 이벤트를 요소에 추가하여 JavaScript가 없거나 사용하지 않으면 쓸모없는 이벤트 처리기를 사용하여 코드를 작게 만들고 잠재적 인 내용을 혼란스럽게 만들 수 있습니다.

95
Steve Paulo

#를 사용하면 재미있는 움직임이 생기므로 #self의 타이핑 작업을 저장하려면 JavaScript bla, bla,를 사용하는 것이 좋습니다.

75
Spammer Joe

나는 다음을 사용한다.

<a href="javascript:;" onclick="myJsFunc();">Link</a>

대신에

<a href="javascript:void(0);" onclick="myJsFunc();">Link</a>
63
se_pavel

나는 href 속성에 일반 URL을 사용하고 onclick에서 일부 JavaScript 함수를 호출해야한다고 말하는 다른 곳의 제안에 동의합니다. 이 결함은 호출 후 자동으로 return false를 추가한다는 것입니다.

이 방법의 문제점은 함수가 작동하지 않거나 문제가있을 경우 링크가 끊어지지 않게된다는 것입니다. Onclick 이벤트는 항상 false을 반환하므로 일반 URL은 호출되지 않습니다.

아주 간단한 해결책이 있습니다. 제대로 작동하면 함수가 true을 반환하도록하십시오. 그런 다음 반환 된 값을 사용하여 클릭을 취소할지 여부를 결정합니다.

JavaScript

function doSomething() {
    alert( 'you clicked on the link' );
    return true;
}

HTML

<a href="path/to/some/url" onclick="return !doSomething();">link text</a>

참고, 나는 doSomething() 함수의 결과를 무효화합니다. 작동하면 true을 반환하므로 무효화되고 (false) path/to/some/URL는 호출되지 않습니다. 함수가 false을 반환하면 (예를 들어, 브라우저가 함수 내에서 사용 된 것을 지원하지 않거나 다른 것이 잘못되면) true이 무효화되고 path/to/some/URL가 호출됩니다.

53
Fczbkk

#javascript:anything보다 낫지 만 다음은 더 좋습니다 :

HTML :

<a href="/gracefully/degrading/url/with/same/functionality.ext" class="some-selector">For great justice</a>

자바 스크립트 :

$(function() {
    $(".some-selector").click(myJsFunc);
});

사용자가 JavaScript를 활성화하지 않은 경우 및 사양 및 예산과 함께 사용하는 경우 항상 정상적인 품질 저하를 위해 노력해야합니다. 또한 HTML에서 JavaScript 속성 및 프로토콜을 직접 사용하는 것은 나쁜 형식으로 간주됩니다.

50
Justin Johnson

JavaScript를 사용하여 링크를 작성하지 않는 한 (브라우저에서 사용하도록 설정되어 있음을 알 수 있도록) JavaScript를 사용하지 않고 탐색하는 사람들에게 적절한 링크를 제공하고 onclick에서 링크의 기본 동작을 방지해야합니다. 이벤트 핸들러. 이렇게하면 JavaScript를 사용하는 사용자는 기능을 실행하고 JavaScript를 사용하지 않는 사용자는 링크를 클릭하기 만하는 것이 아니라 적절한 페이지 (또는 동일한 페이지 내의 위치)로 이동합니다.

38
Simon Forrest

컨트롤에서 데이터의 변경 내용을 생성해야하는 경우 <button> 요소 대신 특히 를 사용하는 것이 좋습니다. POST와 같은 것입니다.

점진적 향상 유형 인 눈에 잘 띄지 않게 요소를 주입하는 것이 좋습니다. ( 이 주석 을 참조하십시오.)

37
phyzome

명확하게 해쉬 (#)는 JavaScript에서 pseudoscheme이기 때문에 더 좋습니다 :

  1. 역사를 오염시키다
  2. 엔진의 새로운 사본을 인스턴스화한다.
  3. 전역 범위에서 실행되며 이벤트 시스템을 존중하지 않습니다.

물론 기본 동작을 방지하는 onclick 처리기가있는 "#"는 [많이] 더 좋습니다. 또한, 자바 스크립트를 실행하는 유일한 목적을 가진 링크는 실제로 뭔가 잘못되었을 때 페이지의 감각적 인 앵커에 사용자를 보내지 않으면 (단지 # 맨 위로 보낼 것입니다) 정말로 "링크"가 아닙니다. 스타일 시트로 링크의 모양과 느낌을 시뮬레이션하고 href를 잊어 버릴 수 있습니다.

또한, cowgod의 제안에 관해서는 특히 다음과 같습니다. ...href="javascript_required.html" onclick="... 좋은 접근 방법이지만 "JavaScript disabled"와 "onclick fails"시나리오를 구별하지 않습니다.

35
Free Consulting

나는 보통 간다.

<a href="javascript:;" onclick="yourFunction()">Link description</a>

Javascript : void (0)보다 짧으며 동일한 작업을 수행합니다.

30
dnetix

나는 다음을 사용할 것이다.

<a href="#" onclick="myJsFunc();return false;">Link</a>

원인:

  1. 이것은 href을 단순하게 만들고, 검색 엔진은 그것을 필요로합니다. 문자열과 같은 다른 것을 사용하면 404 not found 오류가 발생할 수 있습니다.
  2. 마우스가 링크를 가리키면 스크립트라는 것을 알 수 없습니다.
  3. return false;를 사용하면 페이지가 맨 위로 이동하지 않거나 back 버튼을 중단하지 않습니다.
27
Eric Yin

javascript:void(0)을 사용하면이 옵션을 사용하면 마우스 오른쪽 버튼으로 컨텐츠 메뉴를 열 수 없으므로 선택합니다. 그러나 javascript:;는 더 짧으며 같은 일을합니다.

25
user564706

따라서 <a /> 태그를 사용하여 JavaScript 작업을 수행하고 href="#"도 넣으면 이벤트 끝에 ( return false 인라인 이벤트 바인딩의 경우)

<a href="#" onclick="myJsFunc(); return false;">Run JavaScript Code</a>

또는 다음과 같은 JavaScript로 href 속성을 변경할 수 있습니다.

<a href="javascript://" onclick="myJsFunc();">Run JavaScript Code</a>

또는

<a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

그러나 의미 적으로, 이것을 달성하는 위의 모든 방법은 잘못되었습니다 (하지만 잘 작동합니다) . 페이지를 탐색하기 위해 작성된 요소가없고 연관된 JavaScript가있는 요소는 <a> 태그가 아니어야합니다.

모든 요소에 이벤트를 추가 할 수 있기 때문에 <button />를 대신 사용하여 b, span 또는 필요에 따라 다른 요소 나 다른 요소를 수행 할 수 있습니다.


따라서 <a href="#">를 사용하면 한 가지 이점이 있습니다 a href="#"를 수행하면 해당 요소에 기본적으로 커서 포인터가 표시됩니다. 이를 위해 cursor:pointer;와 같은 CSS를 사용 하여이 문제를 해결할 수 있다고 생각합니다.

그리고 마지막으로 JavaScript 코드 자체에서 이벤트를 바인딩하는 경우 <a> 태그를 사용하는 경우 event.preventDefault()을 수행하여이를 수행 할 수 있지만이를 위해 <a> 태그를 사용하지 않는 경우 이점을 얻을 필요가 없습니다.

보시다시피 이런 종류의 물건에는 태그를 사용하지 않는 것이 좋습니다.

23
Ashish Kumar

JQuery를 사용하는 것이 더 좋을 것입니다.

$(document).ready(function() {
    $("a").css("cursor", "pointer");
});

href="#"href="javascript:void(0)"을 모두 생략하십시오.

앵커 태그 마크 업은 다음과 같습니다.

<a onclick="hello()">Hello</a>

충분히 간단!

22
naveen

JavaScript를 실행하기위한 목적으로 만 링크를 사용하지 마십시오.

Href = "#"를 사용하면 페이지가 맨 위로 스크롤됩니다. void (0)를 사용하면 브라우저 내에서 탐색 문제가 발생합니다.

대신 링크가 아닌 다른 요소를 사용하십시오.

<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>

CSS로 스타일을 지정하십시오.

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}
22
Garrett

AngularJS 를 사용하는 경우 다음을 사용할 수 있습니다.

<a href="">Do some fancy JavaScript</a>

어떤 것도하지 않을 것이다.

게다가

  • (#) 와 같이 페이지 상단으로 이동하지 않습니다.
    • 따라서 JavaScript를 사용하여 false을 명시 적으로 반환 할 필요가 없습니다.
  • 간결하다.
20
whirlwin

일반적으로 자바 스크립트가 비활성화 된 클라이언트에 여전히 기능이 있는지 확인하기 위해 항상 폴백 링크가 있어야합니다. 이 개념을 눈에 잘 띄지 않는 JavaScript라고합니다.

예 ... 다음 검색 링크가 있다고 가정 해 보겠습니다.

<a href="search.php" id="searchLink">Search</a>

다음과 같은 작업을 항상 수행 할 수 있습니다.

var link = document.getElementById('searchLink');

link.onclick = function() {
    try {
        // Do Stuff Here        
    } finally {
        return false;
    }
};

그렇게하면 JavaScript가 비활성화 된 사용자는 search.php로 이동하고 JavaScript를 사용하는 시청자는 향상된 기능을 볼 수 있습니다.

19
Andrew Moore

href이 없으면 앵커 태그를 사용할 이유가 없습니다.

거의 모든 요소에서 이벤트 (클릭, 마우스 오버 등)를 첨부 할 수 있습니다. 왜 span 또는 div을 사용하지 않는 것이 좋습니까?

JavaScript가 비활성화 된 사용자의 경우 : 대체 (예 : 대체 href)가없는 경우 <a> 또는 <span> 태그가 무엇이든 관계없이 해당 요소를보고보고 상호 작용할 수 있어야합니다.

18
achairapart

나는 네가 잘못된 이분법을 제시하고 있다고 믿는다. 이 두 가지 옵션 만있는 것은 아닙니다.

저는 D4V360과 의견을 같이했습니다. 당신이 앵커 태그를 사용하고 있다고해도, 당신은 진정으로 앵커가 없다는 것에 동의합니다. 당신이 가지고있는 것은 약간 다른 행동을 취해야하는 문서의 특별한 부분입니다. <span> 태그가 훨씬 적합합니다.

16
Clever Human

나는 개발자 도구를 사용하여 Google Chrome에서 모두 시도했지만 id="#"는 0.32 초가 걸렸습니다. javascript:void(0) 메서드는 0.18 초 밖에 걸리지 않았습니다. 따라서 Google 크롬에서 javascript:void(0)은 더 빠르고 더 잘 작동합니다.

16
user6460587

달성하고자하는 것에 따라 onclick을 잊어 버리고 href를 사용할 수 있습니다.

<a href="javascript:myJsFunc()">Link Text</a>

False를 반환 할 필요성을 해결합니다. 앞에서 언급했듯이 사용자가 페이지 상단으로 이동하기 때문에 # 옵션이 마음에 들지 않습니다. 자바 스크립트가 활성화되어 있지 않은 사용자 (다른 곳에서는보기 드문 일이지만 아주 좋은 아이디어)가 있으면 다른 사용자에게 보내려면 Steve가 제안한 방법이 효과적입니다.

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

마지막으로 javascript:void(0)을 사용할 수 있습니다. 아무도 아무데도 가지 않고 JavaScript 함수를 호출하지 않으려는 경우에 사용할 수 있습니다. 마우스 오버 이벤트가 발생하기를 원하는 이미지가 있으면 효과적이지만 클릭 할만한 것은 없습니다.

16
Will Read

여러 개의 가짜 링크가있을 때, 나는 그들에게 '링크 없음'클래스를 제공하는 것을 선호합니다.

그런 다음 jQuery에서 다음 코드를 추가합니다.

$(function(){
   $('.no-link').click(function(e){
       e.preventDefault();
   });
});

HTML의 경우 링크가 간단합니다.

<a href="/" class="no-link">Faux-Link</a>

해시 태그를 앵커에 사용하지 않는 한 해시 태그를 사용하는 것을 좋아하지 않으며 위의 두 가지 이상의 가짜 링크가있을 때만 위의 작업을 수행합니다. 그렇지 않으면 javascript : void (0)를 사용합니다.

<a href="javascript:void(0)" class="no-link">Faux-Link</a>

일반적으로 링크를 사용하는 것을 피하고 스팬에서 무언가를 랩핑하고이를 팝업이나 컨텐츠 공개와 같은 일부 JavaScript 코드를 활성화하는 방법으로 사용합니다.

나는 개인적으로 그들을 조합하여 사용한다. 예 :

HTML

<a href="#">Link</a>

약간의 jQuery로

$('a[href="#"]').attr('href','javascript:void(0);');

또는

$('a[href="#"]').click(function(e) {
   e.preventDefault();
});

하지만 사용자가 빈 앵커를 클릭 할 때 페이지가 위쪽으로 이동하는 것을 막기 위해이를 사용하고 있습니다. 난 거의 HTML에서 onClick 및 기타 on 이벤트를 직접 사용하지 않습니다.

내 제안은 앵커 대신 class 특성을 가진 <span> 요소를 사용하는 것입니다. 예 :

<span class="link">Link</span>

그런 다음 .link 태그 바로 앞에 또는 외부 JavaScript 문서에서 본문에 래핑 된 스크립트를 사용하여 함수를 </body>에 할당합니다.

<script>
    (function($) {
        $('.link').click(function() {
            // do something
        });
    })(jQuery);
</script>

* 참고 : 동적으로 생성 된 요소의 경우 다음을 사용하십시오.

$('.link').on('click', function() {
    // do something
});

그리고 동적으로 생성 된 요소를 동적으로 생성 된 요소로 생성하려면 다음을 사용하십시오.

$(document).on('click','.link', function() {
    // do something
});

그런 다음 스팬 요소를 작은 CSS로 앵커 모양으로 스타일을 지정할 수 있습니다.

.link {
    color: #0000ee;
    text-decoration: underline;
    cursor: pointer;
}
.link:active {
    color: red;
}

여기에a jsFiddle위의 예제가 있습니다.

13
mdesdev

나는 기본적으로 점진적 향상을 사용하는이 실용적인 기사 을 바꿔 말합니다. 짧은 대답은 javascript:void(0); 또는 #을 사용하지 않는다는 것입니다. 사용자 인터페이스에서 이미 JavaScript가 사용 가능하다고 추정하지 않는 경우입니다.이 경우 javascript:void(0);을 사용해야합니다. 또한 의미 론적으로 false이므로 링크로 span을 사용하지 마십시오. ~로 시작하십시오.

응용 프로그램에서/Home/Action/Parameters와 같이 SEO 친숙한 URL 경로를 사용하는 것도 좋은 방법입니다. 자바 스크립트없이 먼저 작동하는 페이지에 대한 링크가 있다면 나중에 경험을 향상시킬 수 있습니다. 작업 페이지에 대한 실제 링크를 사용하고 onlick 이벤트를 추가하여 프레젠테이션을 향상시킵니다.

다음은 샘플입니다. 홈/ChangePicture는 사용자 인터페이스와 표준 HTML 제출 버튼으로 완성 된 페이지의 양식에 대한 작동 링크이지만 jQueryUI 버튼이있는 모달 대화 상자에 삽입 된 것처럼 보입니다. 어느 쪽이든 모바일 최초 개발을 만족시키는 브라우저에 따라 작동합니다.

<p><a href="Home/ChangePicture" onclick="return ChangePicture_onClick();" title="Change Picture">Change Picture</a></p>

<script type="text/javascript">
    function ChangePicture_onClick() {
        $.get('Home/ChangePicture',
              function (htmlResult) {
                  $("#ModalViewDiv").remove(); //Prevent duplicate dialogs
                  $("#modalContainer").append(htmlResult);
                  $("#ModalViewDiv").dialog({
                      width: 400,
                      modal: true,
                      buttons: {
                          "Upload": function () {
                              if(!ValidateUpload()) return false;
                              $("#ModalViewDiv").find("form").submit();
                          },
                          Cancel: function () { $(this).dialog("close"); }
                      },
                      close: function () { }
                  });
              }
        );
        return false;
    }
</script>
13
Josh Simerman

다음과 같이 앵커에 힌트를 쓸 수도 있습니다.

<a href="javascript:void('open popup image')" onclick="return f()">...</a>

그래서 사용자는이 링크가 무엇을하는지 알게 될 것입니다.

11
Lukom

최선의 방법은 # Do1Not2Use3This4Id5 또는 이와 유사한 ID와 같이 절대 사용하지 않는 ID에 대한 href 앵커를 만드는 것입니다. 아무도 사용하지 않을 것이고 사람들을 불쾌하게하지는 않을 것입니다.

  1. Javascript:void(0)은 나쁜 생각이며 CSP 지원 HTTPS 페이지 https://developer.mozilla.org/en/docs/Security/CSP 에서 컨텐츠 보안 정책을 위반합니다. @ 덕분에 @ jakub.g)
  2. # 만 사용하면 사용자가 눌렀을 때 맨 위로 돌아갑니다.
  3. JavaScript가 활성화되어 있지 않으면 페이지가 손상되지 않습니다 (자바 스크립트 감지 코드가없는 경우).
  4. JavaScript가 활성화 된 경우 기본 이벤트를 비활성화 할 수 있습니다
  5. 브라우저에서 텍스트를 선택하지 못하게하는 방법을 모르면 href를 사용해야합니다 (4를 사용하면 브라우저가 텍스트를 선택하지 못하게됩니다.)

기본적으로 아무도이 기사에서 언급 한 5 점이 갑자기 링크 주변에서 물건을 선택하기 시작하면 귀하의 사이트가 전문가가 아닌 것으로부터 떨어져 나가는 것이 중요하다고 생각합니다.

11
Anders M.

JavaScript가 사용 중지 된 사용자가 귀하의 사이트에 액세스 할 수있게하려면 좋았습니다.이 경우 href는 실행중인 JavaScript와 동일한 작업을 수행하는 페이지를 가리 킵니다. 그렇지 않으면 다른 사람이 언급 한 것처럼 기본 동작 (페이지 상단으로 스크롤)을 방지하기 위해 "#"와 "return false;")를 사용합니다.

"javascript:void(0)"에 대한 인터넷 검색은이 주제에 대한 많은 정보를 제공합니다. 그들 중 일부는 this one }과 같은 이유로 void (0)를 사용하지 마십시오.

10
mmacaulay

나는 href에 대해 # 값을 계속 사용하고자하는 사람들에 의한 많은 답변을 보았습니다. 그러므로 여기에 두 캠프를 모두 만족시키는 대답이 있습니다.

A) href 값으로 javascript:void(0)을 가지고있어서 기쁩니다 :

<a href="javascript:void(0)" onclick="someFunc.call(this)">Link Text</a>

B) jQuery를 사용하고 있으며 #href 값으로 사용하고 싶습니다.

<a href="#" onclick="someFunc.call(this)">Link Text</a>

<script type="text/javascript">
    /* Stop page jumping when javascript links are clicked.
       Only select links where the href value is a #. */
    $('a[href="#"]').live("click", function(e) {
         return false; // prevent default click action from happening!
         e.preventDefault(); // same thing as above
    });
</script>

링크가 동적으로 생성되지 않는다는 것을 알고 있다면 대신 click 함수를 사용하십시오.

$('a[href="#"]').click(function(e) {

9
dazbradbury

여기서 기억해야 할 중요한 점이 하나 더 있습니다. 섹션 508 compliance. 그렇기 때문에 탭 리더를 사용하여 탭을 통해 포커스를 맞출 수 있도록 JAWS 와 같은 스크린 리더에 앵커 태그가 필요하다는 점을 지적해야합니다. 따라서 "JavaScript를 사용하고 앵커가 처음부터 잊어 버린"솔루션은이 중 일부의 옵션이 아닙니다. href 내부에서 JavaScript를 실행하는 것은 화면이 위로 올라갈 여유가없는 경우에만 필요합니다. 당신은 0 초 동안 settimeout을 사용할 수 있고 포커스가 필요한 곳으로 JavaScript를 발사 할 수 있습니다.하지만 apage가 위로 이동했다가 뒤로 이동합니다.

9
rcof

나는 href = "#"을 사용하여 링크를 찾는다. 그런 다음이 코드를 사용합니다.

$(document).ready(function() {
    $("a[href='#']").click(function(event) {
        event.preventDefault();
    });
});

즉, href가 해시 (* = "#")와 같으면 기본 링크 동작을 방지하므로 해당 기능을 쓸 수 있으며 앵커 클릭에는 영향을 미치지 않습니다.

9
Vinny Fonseca

귀하의 말로는 JavaScript 코드를 실행하기위한 링크를 만들고 싶다는 것입니다.

그렇다면 브라우저에서 JavaScript를 차단하는 사람들이 있다는 것을 고려해야합니다.

따라서 실제로 JavaScript 함수를 실행하기 위해서만 링크를 사용하려는 경우 동적으로 추가해야합니다. 그러면 사용자가 브라우저에서 JavaScript를 활성화하지 않았고 해당 링크를 사용중인 경우에도 보이지 않습니다. 브라우저에서 JavaScript가 비활성화 된 경우와 같은 링크를 사용하는 것은 의미가없는 JavaScript 함수를 트리거합니다.

이러한 이유로 인해 JavaScript가 비활성화 된 경우 어느 쪽도 좋습니다.

JavaScript가 활성화되어 있고 해당 링크를 사용하여 JavaScript 함수를 호출하려는 경우

<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>

사용하는 것보다 훨씬 좋은 방법입니다.

<a href="#" onclick="myJsFunc();">Link</a>

왜냐하면 href = "#"은 페이지가 필요하지 않은 행동을하기 때문입니다.

또한 <a href="javascript:void(0)" onclick="myJsFunc();">Link</a><a href="#" onclick="myJsFunc();">Link</a>보다 나은 또 다른 이유는 JavaScript가 대부분의 브라우저에서 기본 스크립팅 언어로 사용된다는 것입니다. Internet Explorer의 예로서 onclick 속성을 사용하여 사용되는 스크립팅 언어 유형을 정의합니다. 다른 좋은 스크립팅 언어가 팝업되지 않으면 Internet Explorer에서도 JavaScript가 기본값으로 사용되지만 다른 스크립팅 언어가 javascript:를 사용하면 Internet Explorer에서 어떤 스크립팅 언어가 사용되고 있는지 알 수 있습니다.

이를 고려해 볼 때, 나는

<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>

자바 스크립트 코드 내에서 그런 종류의 링크를 추가하시기 바랍니다.

$(document).ready(function(){
    $(".blabla").append('<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>')
});
8
Berker Yüceer

Href를 사용하여 해시 만있는 모든 링크를 제거 할 수 있습니다.

HTML :

<a href="#" onclick="run_foo()"> foo </a>

JS :

$(document).ready(function(){         // on DOM ready or some other event

   $('a[href=#]').attr('href','');    // set all reference handles to blank strings
                                      //  for anchors that have only hashes

});
8
vol7ron

왜 이것을 사용하지 않습니까? 그러면 페이지가 위로 스크롤되지 않습니다.

<span role="button" onclick="myJsFunc();">Run JavaScript Code</span>
8
AlxGol

JavaScript가 아닌 사용자에게는 대체로 실제 URL이 있어야합니다.

이것이 이해가되지 않는다면 #href 속성으로 사용하십시오. onclick 특성을 사용하는 것이 HTML에서 직접 JavaScript를 포함하므로 사용하지 않는 것이 좋습니다. 더 좋은 방법은 외부 JS 파일을 사용하고 해당 링크에 이벤트 처리기를 추가하는 것입니다. 그런 다음 사용자가 URL을 클릭 한 후 URL에 #를 추가하지 않도록 기본 이벤트를 방지 할 수 있습니다.

7
Peter

전반적인 정서와 완전히 일치 할 때, 필요할 때 void(0)을 사용하고, 필요할 때 유효한 URL을 사용하십시오.

URL 재 작성 사용 자바 스크립트를 사용하지 않으려는 작업을 수행 할뿐만 아니라 무엇을 할 것인지 정확하게 알려주는 URL을 만들 수 있습니다.

<a href="./Readable/Text/URL/Pointing/To/Server-Side/Script" id="theLinkId">WhyClickHere</a>

서버 측에서는 URL과 쿼리 문자열을 구문 분석하고 원하는 것을 수행하면됩니다. 똑똑하다면 서버 측 스크립트가 Ajax와 표준 요청에 다르게 응답하도록 할 수있다. 페이지의 모든 링크를 처리하는 간결한 코드를 작성할 수 있습니다.

URL 재 작성 자습서

찬성

  • 상태 표시 줄에 나타납니다.
  • JavaScript의 onclick 핸들러를 통해 Ajax로 쉽게 업그레이드
  • 실질적으로 자신에게 주석을 달다.
  • 일회용 HTML 파일로 디렉토리가 산산조각이 나지 않도록합니다.

단점

  • 자바 스크립트에서 여전히 event.preventDefault ()를 사용해야한다.
  • 서버 측에서 상당히 복잡한 경로 처리 및 URL 구문 분석.

나는 거기에 톤이 더 많다는 것을 확신합니다. 자유롭게 토론하십시오.

7
user394888

현대 웹 사이트에서 요소가 JavaScript 기능 (실제 링크가 아님) 만 수행하는 경우에는 href 사용을 피해야합니다.

왜? 이 요소가 있으면 브라우저에 목적지와의 링크임을 알립니다. 이를 통해 브라우저는 새 탭/창에서 열기 기능을 표시합니다 (Shift + 클릭을 사용할 때도 트리거 됨). 그렇게하면 원하는 기능을 실행하지 않고 동일한 페이지를 열게되므로 사용자 좌절이 발생합니다.

IE와 관련하여 : IE8에서 doctype이 설정되면 요소 스타일 (호버 포함)이 작동합니다. IE의 다른 버전은 더 이상 걱정할 필요가 없습니다.

단점 만 : HREF를 제거하면 tabindex가 제거됩니다. 이를 극복하기 위해 링크로 스타일이 지정된 버튼을 사용하거나 JS를 사용하여 tabindex 속성을 추가 할 수 있습니다.

7
TomDK

<a> 요소를 사용하는 경우 다음을 사용하십시오.

<a href="javascript:myJSFunc();" />myLink</a>

개인적으로 나는 나중에 자바 스크립트를 사용하여 이벤트 핸들러를 대신 부착 할 것입니다 (attachEvent 또는 addEventListener을 사용하거나 <선호하는 JavaScript 프레임 워크를 여기에 입력하십시오>).

7
Pablo Cabrera

URL이 필요할 수도 있다는 사실을 잊지 마십시오. onclick은 참조가 수행되기 전에 해고되기 때문에 때로는 페이지를 탐색하기 전에 클라이언트 측에서 처리해야 할 경우가 있습니다.

7
nathaniel

요점을 생각해 내기 위해 다른 이들 중 일부는 언급했습니다.

이벤트 'onload'a 또는 $ ('document ')를 바인드하는 것이 훨씬 더 좋습니다. 그런 다음 JavaScript를 click 이벤트에 직접 삽입하십시오.

자바 스크립트를 사용할 수없는 경우 현재 URL에 href를 사용하고 링크 위치에 앵커를 사용합니다. 이 페이지는 JavaScript가없는 사람들에게도 유용 할 것입니다.

손에 들고 있기 때문에 다음은 도움이 될만한 jQuery입니다.

var [functionName] = function() {
   // do something
};

jQuery("[link id or other selector]").bind("click", [functionName]);
6
Matt Goddard

= / 당신이 just (일부 제안 된 D4V360과 같은 스팬을 사용하는 대신) 일부 JavaScript 코드를 실행하는 방법으로 링크를 사용하는 경우 다음을 수행하십시오.

<a href="javascript:(function()%7Balert(%22test%22)%3B%7D)()%3B">test</a>

탐색을 위해 onclick과 연결된 링크를 사용하는 경우 JavaScript가 꺼져있을 때 대체 링크로 href = "#"을 사용하지 마십시오. 그것은 사용자가 링크를 클릭 할 때 대개 매우 성가시다. 가능한 경우 onclick 처리기에서 제공하는 것과 동일한 링크를 제공하십시오. 그렇게 할 수 없다면 onclick을 건너 뛰고 href에서 자바 스크립트 URI를 사용하십시오.

6
Shadow2531

가능한 한 많이 내 HTML 마크 업에서 JavaScript를 지우는 것이 좋습니다. 클릭 이벤트 처리기로 <a>를 사용하고 있다면 <a class="trigger" href="#">Click me!</a>를 사용하는 것이 좋습니다.

$('.trigger').click(function (e) {
    e.preventDefault();
    // Do stuff...
});

많은 개발자가 클릭 이벤트 핸들러에 앵커 태그를 사용하는 것이 좋지 않다고 생각하는 것이 중요합니다. 그들은 <span> 또는 <div>cursor: pointer;를 추가하는 CSS를 사용하는 것을 선호합니다. 이것은 많은 논쟁이 있다면 문제입니다.

6
Jesse Atkinson

의미없는 코드로 HTML을 오염시키지 않으려면 HTML에서 사용해서는 안됨 인라인 onclick="something();"; 모든 클릭 바인딩은 Javascript 파일 (* .js)로 설정해야합니다.

다음과 같이 바인딩을 설정하십시오. $('#myAnchor').click(function(){... **return false**;}); 또는 $('#myAnchor').bind('click', function(){... **return false**;});

그런 다음 수천 개의 href="javascript:void(0);"없이 href="#"없이 쉽게로드 할 수있는 깔끔한 HTML 파일이 있습니다.

6
G. Ghez

JavaScript가 비활성화되어 있어도 링크가 아무 것도하지 못하게하는 완전성을위한 또 다른 옵션이 있습니다.

<a href="#void" onclick="myJsFunc()">Run JavaScript function</a>

ID가 페이지에 없으면 링크는 아무 작업도 수행하지 않습니다.

일반적으로 Aaron Wagner의 답변에 동의하며 JavaScript 링크는 JavaScript 코드로 문서에 삽입되어야합니다.

3
Timo Huovinen

Javascript: void(0);은 null 값 [할당되지 않음]에 대해 무효화됩니다. 즉, 브라우저가 NULL을 (를) 클릭하여 dom _ (으)로 이동하면 창이 false로 돌아갑니다.
'#'은 자바 스크립트에서 DOM 또는 Window를 따르지 않습니다. 앵커 href 내부의 '#'기호는 LINK입니다. 동일한 전류 방향에 연결하십시오.

2
SchoolforDesign

1 월 2019 일에 수정 됨

HTML5 에서, href 속성없이 a 요소를 사용하는 것은 valid 입니다. 그것은 "자리 표시 자 하이퍼 링크"로 간주됩니다

A 요소에 href 속성이없는 경우 해당 요소는 관련성이있는 경우 링크가 배치 된 위치의 자리 표시자를 나타내며 요소의 내용만으로 이루어집니다.

예:

<a>previous</a>

그 후 다른 방법을 원할 경우 :

1 - 링크가 어디에도 가지 않는 경우 <a> 요소를 사용하지 마십시오. <span> 또는 다른 적절한 것을 사용하고 CSS :hover를 추가하여 원하는대로 스타일을 지정하십시오.

2 - 원시적이고 정확하며 빠르려면 javascript:void(0) OR javascript:undefined OR javascript:;를 사용하십시오.

2
Lyes CHIOUKH

#를 사용하는 대신 javascript : void (0)를 사용하여 헤더 섹션에 앵커 태그 리다이렉션을 중지 할 수 있습니다.

function helloFunction() {
    alert("hello world");
}
<a href="javascript:void(0)" onclick="helloFunction();">Call Hello Function</a>
0
Javed Khan

가장 간단하고 모든 사람들이 가장 많이 사용하는 것은 javascript : void (0)# 대신 # 헤더 섹션으로 태그 리디렉션 =.

<a href="javascript:void(0)" onclick="testFunction();">Click To check Function</a>

function testFunction() {
    alert("hello world");
}
0
Dev pokhariya