[javascript] JavaScript 링크 “#”또는 “javascript : void (0)”에 어떤 “href”값을 사용해야합니까?

수행 <a href="#" onclick="myJsFunc();">Link</a>하거나 <a href="javascript:void(0)" onclick="myJsFunc();">Link</a>또는 포함하는 어떤 다른 onclick속성을 – 좋아 다시 5 년 전,하지만 지금은 나쁜 관행이 될 수 있습니다. 이유는 다음과 같습니다.

1. 그것은 유지하기 어려우며 확장하기 어려운 것으로 판명 된 눈에 띄는 JavaScript의 실천을 장려합니다. 이에 대한 자세한 내용은 Unobtrusive JavaScript 입니다.

2. 엄청나게 지나치게 장황한 코드를 작성하는 데 시간을 투자하고 있습니다.이 코드는 코드베이스에 거의 이점이 없습니다.

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

눈에 잘 띄지 않는 JavaScript 방식

href속성 이 전혀 없습니다 ! CSS를 올바르게 재설정하면 기본 커서 스타일이 누락되어 처리되므로 문제가되지 않습니다. 그런 다음 우아하고 눈에 거슬리지 않는 모범 사례를 사용하여 자바 스크립트 기능을 추가하십시오. 이는 자바 스크립트 로직이 마크 업 대신 자바 스크립트로 유지 될 때 유지 관리가 쉬워집니다. 이는 로직을 분리해야하는 대규모 자바 스크립트 애플리케이션 개발을 시작할 때 필수적입니다. 블랙 박스 구성 요소 및 템플릿. 이에 더 큰 규모의 자바 스크립트 응용 프로그램 아키텍처

간단한 코드 예

// 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>

블랙 박스 된 Backbone.js 예제

확장 가능하고 블랙 박스 처리 된 Backbone.js 구성 요소 예를 보려면이 작동하는 jsfiddle 예를 참조하십시오 . 우리가 눈에 거슬리지 않는 JavaScript 관행을 활용하는 방법에 주목하고, 적은 양의 코드에는 여러 구성 요소 인스턴스 간의 부작용이나 충돌없이 페이지에서 여러 번 반복 할 수있는 구성 요소가 있습니다. 놀랄 만한!

노트

• 요소 에서 href속성을 생략하면 키 탐색을 a사용하여 요소에 액세스 할 수 없습니다 tab. tab키 를 통해 해당 요소에 액세스 하려면 tabindex속성을 설정 하거나 button대신 요소를 사용할 수 있습니다 . Tracker1의 answer 에서 언급했듯이 버튼 요소의 스타일을 일반 링크처럼 쉽게 지정할 수 있습니다 .

• 요소 에서 href특성을 생략 a하면 Internet Explorer 6 및 Internet Explorer 7 이 a:hover스타일 을 적용하지 않으므로 a.hover대신 이를 통해 간단한 JavaScript shim을 추가했습니다 . href 속성이없고 우아한 저하가없는 것처럼 링크가 작동하지 않는 것처럼 완벽하게 괜찮습니다. 더 큰 문제가 생길 것입니다.

• 자바 스크립트를 비활성화 한 상태에서 작업을 계속 수행하려면 Ajax 요청을 통해 또는 수동으로 작업을 수행하는 대신 수동으로 작업을 수행하는 일부 URL로 이동 a하는 href속성이 있는 요소 를 사용하십시오 . 이 작업을 수행하는 event.preventDefault()경우 버튼 클릭시 링크를 따라 가지 않는지 확인하기 위해 클릭 통화를 수행해야합니다. 이 옵션을 정상 성능 저하라고합니다.

답변

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>

<a href="#" onclick="myJsFunc(); return false;">Link</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>