javascript - quot - 자바스크립트 링크 걸기




자바 스크립트 링크에 "href"값을 사용해야합니까, "#"또는 "javascript:void(0)"? (20)

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

다음은 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>


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

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

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

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

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

충분히 간단!


나는 다음을 사용한다.

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

대신에

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

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

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

원인:

  1. 이것은 href 간단하게 만들고 검색 엔진은 href 필요로합니다. 다른 문자열 (예 : 문자열)을 사용하면 404 not found 오류가 발생할 수 있습니다.
  2. 링크 위로 마우스를 가져 가면 스크립트임을 알 수 없습니다.
  3. 사용하여 return false; , 페이지가 위로 이동하지 않거나 back 단추를 끊지 않습니다.

나는 정직하게도 어느 것도 제안하지 않을 것이다. 그 동작을 위해 양식화 된 <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 특성을 사용하지 않고 스크립트를 통해 바인딩하는 것이 좋습니다. 유일한 장애는 비활성화 할 수없는 구형 IE에서 가짜 3D 텍스트 효과입니다.

A 요소를 사용해야하는 경우 javascript:void(0); 이미 언급 된 이유 때문입니다.

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

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


네가 나에게 묻지 않는다.

"링크"가 일부 JavaScript 코드를 실행하는 유일한 목적 인 경우 링크로 적합하지 않습니다. 오히려 JavaScript 함수가 결합 된 텍스트 조각입니다. onclick handler 부착 된 <span> 태그와 링크를 그대로 사용하기위한 기본 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>


둘 다.

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

그렇게 할 수 없다면 자바 스크립트와 적절한 클릭 이벤트 핸들러로 앵커 태그를 문서에 삽입해야합니다.

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

눈에 잘 띄지 않는 JavaScript점진적 향상 (위키 피 디아 모두)을 확인하십시오.


따라서 <a /> 태그를 사용하여 JavaScript 작업을 수행 할 때 href="#" 를 추가하면 다음과 같이 이벤트 마지막에 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> 태그가 아니어야합니다.

모든 요소에 이벤트를 추가 할 수 있기 때문에 b 또는 span과 같은 요소를 필요에 따라 <button /> 사용하면됩니다.

따라서 <a href="#"> 를 사용하면 한 가지 이점 이 있습니다. a href="#" 할 때 커서 포인터를 해당 요소에 기본적으로 가져옵니다. 이를 위해, 나는 cursor:pointer; 처럼 cursor:pointer; 를 사용할 수 있다고 생각한다 cursor:pointer; 이 문제도 해결됩니다.

그리고 결국 JavaScript 코드 자체에서 이벤트를 바인딩하는 경우 <a> 태그를 사용하는 경우 event.preventDefault() 를 수행 할 수 있지만 <a> 태그를 사용하지 않는 경우 이, 거기에 이점을 얻을, 당신은 이것을 할 필요가 없습니다.

그래서, 당신이 본다면, 이런 종류의 물건에 태그를 사용하지 않는 것이 좋습니다.


자바 스크립트에서는 pseudoscheme이기 때문에 확실히 해시 ( # )가 더 좋습니다.

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

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

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


첫 번째는 자바 스크립트가 사용 중지 된 경우 따라야 할 실제 링크가있는 것이 이상적입니다. JavaScript가 실행되면 click 이벤트가 발생하지 않도록 false를 반환하십시오.

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

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

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

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


#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 속성 및 프로토콜을 직접 사용하는 것은 나쁜 형식으로 간주됩니다.


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


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

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


javascript:void(0) 를 사용합니다. 왜냐하면이 기능을 사용하면 마우스 오른쪽 버튼으로 컨텐츠 메뉴를 열 수 없기 때문입니다. 하지만 javascript:; 더 짧고 똑같은 일을합니다.


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

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

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

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

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

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

달성하고자하는 것에 따라 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 함수를 호출하고 싶지 않은 경우 아무도 아무데도 가지 않으려는 경우 사용할 수 있습니다 . 마우스 오버 이벤트가 발생하기를 원하는 이미지가 있으면 효과적이지만 사용자가 클릭 할만한 것은 없습니다.


최선의 방법은 # 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 점이 갑자기 링크 주변에서 물건을 선택하기 시작하면 귀하의 사이트가 전문가가 아닌 것으로부터 떨어져 나가는 것이 중요하다고 생각합니다.


href어쩌면 앵커 태그를 사용할 이유 가 없을 수도 있습니다.

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

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


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


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

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





href