etc./StackOverFlow

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

청렴결백한 만능 재주꾼 2021. 9. 30. 00:22
반응형

질문자 :Community Wiki


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



javascript:void(0) 합니다.

세 가지 이유. # 사용을 권장하는 것은 불가피하게 다음과 같이 호출된 함수의 반환 값을 사용하는 것으로 이어집니다.

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

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

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

onclick 이벤트 속성이 동적으로 할당되는 경우가 있기 때문입니다. 특정 첨부 방법 또는 다른 방법에 대해 함수를 코딩하지 않고도 함수를 호출하거나 동적으로 할당할 수 있는 것을 선호합니다. 따라서 onclick (또는 무엇이든)은 다음과 같습니다.

 onclick="someFunc.call(this)"

또는

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

javascript:void(0) 하면 위의 모든 골칫거리를 피할 수 있으며 단점에 대한 예를 찾지 못했습니다.

따라서 외로운 개발자라면 분명히 스스로 선택할 수 있지만 팀으로 작업하는 경우 다음 중 하나를 명시해야 합니다.

href="#" 를 사용하고 onclick return false; 가 포함되어 있는지 확인하십시오. onclick 속성에 동적으로 함수를 첨부하면 오류가 발생하지 않을 false 반환하는지 확인합니다.

또는

href="javascript:void(0)"

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


Community Wiki

어느 것도 아니다.

의미 있는 실제 URL을 가질 수 있는 경우 이를 HREF로 사용하십시오. 누군가가 링크를 마우스 가운데 버튼으로 클릭하여 새 탭을 열거나 JavaScript가 비활성화된 경우 onclick이 실행되지 않습니다.

이것이 가능하지 않다면 최소한 앵커 태그를 JavaScript와 적절한 클릭 이벤트 핸들러를 사용하여 문서에 삽입해야 합니다.

이것이 항상 가능한 것은 아니지만 제 생각에는 공개 웹 사이트를 개발할 때 노력해야 한다는 것을 알고 있습니다.

Unobtrusive JavaScriptProgressive 향상 (둘 다 Wikipedia)을 확인하십시오.


Community Wiki

<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 재설정은 누락된 기본 커서 스타일을 처리하므로 문제가 되지 않습니다. 그런 다음 JavaScript 로직이 마크업이 아닌 JavaScript에 유지되기 때문에 유지 관리가 용이한 우아하고 눈에 거슬리지 않는 모범 사례를 사용하여 JavaScript 기능을 연결합니다. 이는 로직을 다음으로 분할해야 하는 대규모 JavaScript 애플리케이션 개발을 시작할 때 필수적입니다 블랙박스 구성 요소 및 템플릿. 대규모 JavaScript 애플리케이션 아키텍처 에서 이에 대해 자세히 알아보십시오.

간단한 코드 예제

 // 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의 답변 에서 언급한 것처럼 일반 링크처럼 보이도록 버튼 요소의 스타일을 쉽게 지정할 수 있습니다.

  • 생략 href 상의 특성 요소 것은 원인이됩니다 a 인터넷 익스플로러 6Internet Explorer 7을 상의하지하는 a:hover 우리를 통해이 작업을 수행 할 수있는 간단한 자바 스크립트 심 추가 한 이유는 스타일, a.hover 대신합니다. href 속성이 없고 정상적인 성능 저하가 없으면 링크가 작동하지 않으며 걱정할 더 큰 문제가 있는 것처럼 완벽하게 괜찮습니다.

  • JavaScript가 비활성화된 상태에서 작업이 계속 작동하도록 하려면 Ajax 요청이나 가야 할 모든 것을 통하지 않고 수동으로 작업을 수행하는 일부 URL로 이동하는 href a 이 작업을 수행하는 경우 버튼을 클릭할 때 링크를 따르지 않는지 확인하기 위해 클릭 호출에서 event.preventDefault() 이 옵션을 단계적 저하라고 합니다.


Community Wiki

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

javascript:; 또한 javascript:void(0);


Community Wiki

나는 솔직히 어느 쪽도 제안하지 않을 것입니다. 그 동작에 대해 양식화된 <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 throws)되는 경우 예기치 않은 동작을 일으킬 수 있으며, 적절한 폴스루 동작이 아니고 탐색 기록을 변경하려는 경우가 아니면 해시 태그를 피합니다.

0 javascript:void('Delete record 123') 와 같은 문자열로 바꿀 수 있습니다. 이 문자열은 클릭이 실제로 무엇을 하는지 보여주는 추가 표시기 역할을 할 수 있습니다.


Community Wiki

첫 번째, 이상적으로는 사용자가 JavaScript를 비활성화한 경우에 따라야 할 실제 링크가 있습니다. JavaScript가 실행될 때 클릭 이벤트가 발생하지 않도록 false를 반환해야 합니다.

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

Angular2를 사용하는 경우 다음과 같이 작동합니다.

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

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


Community Wiki

당신이 나에게 묻는 경우에도;

"링크"가 일부 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>


Community Wiki

이상적으로는 다음을 수행합니다.

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

또는 HTML에 기본 작업 링크가 있고 DOM이 렌더링된 후 JavaScript를 통해 요소에 눈에 띄지 않게 onclick 이벤트를 추가하여 JavaScript가 없거나 사용되지 않는 경우 쓸모없는 이벤트 핸들러가 코드에 수수께끼를 내고 잠재적으로 실제 콘텐츠를 난독화(또는 최소한 산만)하게 만듭니다.


Community Wiki

단지 사용 # 내가 사용하는 것이 좋습니다 것입니다, 그래서 몇 가지 재미있는 운동을하게 #self 당신의 타이핑 노력에 저장할지 여부를 JavaScript bla, bla, .


Community Wiki

나는 다음을 사용한다

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

대신에

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

Community Wiki

특히 컨트롤이 데이터를 변경해야 하는 경우 <button> 요소를 대신 사용하는 것이 좋습니다. (POST와 비슷합니다.)

점진적 향상의 일종인 요소를 눈에 거슬리지 않게 주입하면 더욱 좋습니다. (이 주석을 참조하십시오.)


Community Wiki

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

이 접근 방식의 문제는 기능이 작동하지 않거나 문제가 발생하면 링크를 클릭할 수 없게 된다는 것입니다. Onclick 이벤트는 항상 false 반환하므로 일반 URL은 호출되지 않습니다.

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

자바스크립트

 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 이 호출됩니다.


Community Wiki

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


Community Wiki

JavaScript를 사용하여 링크를 작성하지 않는 한(브라우저에서 활성화되어 있음을 알기 위해), 이상적으로는 JavaScript를 비활성화한 상태에서 탐색하는 사람들에게 적절한 링크를 제공하고 onclick에서 링크의 기본 동작을 방지해야 합니다. 이벤트 핸들러. 이런 식으로 JavaScript가 활성화된 사람들은 기능을 실행하고 JavaScript가 비활성화된 사람들은 링크를 클릭하고 아무 일도 일어나지 않고 적절한 페이지(또는 동일한 페이지 내의 위치)로 점프합니다.


Community Wiki

JavaScript에서는 의사 체계이기 때문에 확실히 해시( #

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

물론 기본 동작을 방지하는 onclick 핸들러가 있는 "#"이 [훨씬] 더 좋습니다. 게다가 자바스크립트를 실행하는 유일한 목적을 가진 링크는 무언가 잘못되었을 때 페이지의 합리적인 앵커로 사용자를 보내지 않는 한 실제로 "링크"가 아닙니다. 스타일시트를 사용하여 링크의 모양과 느낌을 간단히 시뮬레이션하고 href를 전혀 잊어버릴 수 있습니다.

또한 cowgod의 제안, 특히 다음과 같이: ...href="javascript_required.html" onclick="... 이것은 좋은 접근 방식이지만 "JavaScript 비활성화됨" 및 "onclick 실패" 시나리오를 구분하지 않습니다.


Community Wiki

나는 보통 간다

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

javascript:void(0)보다 짧고 동일합니다.


Community Wiki

나는 사용할 것입니다 :

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

원인:

  1. href 간단하게 만들고 검색 엔진에 필요합니다. 문자열과 같은 다른 것을 사용하면 404 not found 오류가 발생할 수 있습니다.
  2. 링크 위로 마우스를 가져 가면 스크립트라고 표시되지 않습니다.
  3. return false; 를 사용하여; , 페이지가 맨 위로 이동하지 않거나 back 버튼이 끊어지지 않습니다.

Community Wiki

나는 use javascript:void(0) 을 선택했는데, 이를 사용하면 콘텐츠 메뉴를 열 때 오른쪽 클릭을 방지할 수 있기 때문입니다. 하지만 javascript:; 더 짧고 동일한 작업을 수행합니다.


Community Wiki

<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> 태그를 사용하지 않는 경우 이점이 있습니다. 이 작업을 수행할 필요가 없습니다.

따라서 이런 종류의 물건에는 태그를 사용하지 않는 것이 좋습니다.


Community Wiki

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

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

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

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

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

 .funcActuator { cursor: default; } .funcActuator:hover { color: #900; }

Community Wiki

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

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

href="#"href="javascript:void(0)" 를 모두 생략합니다.

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

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

충분히 간단합니다!


Community Wiki

일반적으로 JavaScript가 비활성화된 클라이언트에 여전히 일부 기능이 있는지 확인하기 위해 항상 폴백 링크가 있어야 합니다. 이 개념을 눈에 거슬리지 않는 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를 사용하는 뷰어는 향상된 기능을 볼 수 있습니다.


Community Wiki

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

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

아무 것도 하지 않을 것입니다.

게다가

  • (#)과 같이 페이지 상단으로 이동하지 않습니다.
    • 따라서 JavaScript를 사용 false 를 반환할 필요가 없습니다.
  • 짧고 간결하다

Community Wiki

달성하려는 작업에 따라 onclick을 잊어버리고 href만 사용할 수 있습니다.

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

false를 반환해야 할 필요성을 해결합니다. # 옵션이 마음에 들지 않는다. 왜냐하면 언급했듯이 사용자를 페이지 상단으로 데려갈 것이기 때문이다. JavaScript가 활성화되지 않은 사용자를 보낼 다른 곳이 있다면(내가 일하는 곳에서는 드물지만 매우 좋은 아이디어임) Steve가 제안한 방법은 훌륭하게 작동합니다.

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

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


Community Wiki

나는 당신이 잘못된 이분법을 제시하고 있다고 생각합니다. 이 두 가지 옵션만 있는 것은 아닙니다.

앵커 태그를 사용하고 있지만 여기에는 진정한 앵커가 없다고 제안한 D4V360 씨의 말에 동의합니다. 약간 다르게 작동해야 하는 문서의 특수 섹션만 있으면 됩니다. <span> 태그가 훨씬 더 적절합니다.


Community Wiki

개인적으로 조합해서 사용하고 있습니다. 예를 들어:

HTML

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

약간의 jQuery로

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

또는

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

하지만 사용자가 빈 앵커를 클릭할 때 페이지가 맨 위로 점프하는 것을 방지하기 위해 이것을 사용하고 있습니다. 나는 HTML에서 직접 on 이벤트를 거의 사용하지 않습니다.

내 제안은 class <span> 요소를 사용하는 것입니다. 예를 들어:

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

</body> 태그 바로 앞이나 외부 JavaScript 문서에서 본문에 래핑된 스크립트 .link 함수를 할당합니다.

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

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

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

그리고 동적으로 생성된 요소로 생성된 동적으로 생성된 요소의 경우 다음을 사용합니다.

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

그런 다음 약간의 CSS를 사용하여 앵커처럼 보이도록 span 요소의 스타일을 지정할 수 있습니다.

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

다음은 위에서 언급한 jsFiddle 예제입니다.


Community Wiki

내가 여러 개의 가짜 링크를 가지고 있을 때 나는 그들에게 '링크 없음' 등급을 부여하는 것을 선호합니다.

그런 다음 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 코드를 활성화하는 방법으로 사용하는 것을 좋아합니다.


Community Wiki

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


Community Wiki

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

javascript:void(0) "에 대한 인터넷 검색은 이 주제에 대한 많은 정보를 제공합니다. 같은 그들 중 일부, 이것 언급하지 않는 이유 (0) 무효 사용합니다.


Community Wiki

나는 기본적으로 Progressive enhancement 를 사용하여 이 실용적인 기사를 의역하고 있습니다. 짧은 대답은 javascript:void(0); 또는 # 사용자 인터페이스가 이미 JavaScript가 활성화되어 있다고 추론하지 않는 한, 이 경우 javascript:void(0); . 또한 span을 링크로 사용하지 마십시오. 처음에는 의미상 거짓이기 때문입니다.

/Home/Action/Parameters와 같은 SEO 친화적인 URL 경로를 애플리케이션에서 사용하는 것도 좋은 방법입니다. JavaScript 없이 작동하는 페이지에 대한 링크가 먼저 있으면 나중에 경험을 향상시킬 수 있습니다. 작업 페이지에 대한 실제 링크를 사용한 다음 onlick 이벤트를 추가하여 프레젠테이션을 향상시킵니다.

여기 샘플이 있습니다. Home/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>

Community Wiki

출처 : 여기를 클릭하세요


출처 : http:www.stackoverflow.com/questions/134845/which-href-value-should-i-use-for-javascript-links-or-javascriptvoid0

반응형