리디렉션없이 클릭으로 간단한 JavaScript 함수를 실행하고 싶습니다.
JavaScript 호출을 href
속성 에 넣는 것과 다른 점이 있습니까?
<a href="javascript:my_function();window.print();">....</a>
) 대 onclick
속성에 넣는 것 ( onclick
이벤트에 바인딩 )?
답변
href 내에 onclick을 넣으면 콘텐츠를 행동 / 행동과 분리시키는 것을 강력하게 믿는 사람들이 기분을 상하게 할 수 있습니다. 논란은 귀하의 HTML 컨텐츠가 프리젠 테이션이나 행동이 아닌 컨텐츠에만 집중해야한다는 것입니다.
요즘 일반적인 경로는 자바 스크립트 라이브러리 (예 : jquery)를 사용하고 해당 라이브러리를 사용하여 이벤트 핸들러를 만드는 것입니다. 다음과 같이 보일 것입니다 :
$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );
답변
나쁜:
<a id="myLink" href="javascript:MyFunction();">link text</a>
좋은:
<a id="myLink" href="#" onclick="MyFunction();">link text</a>
보다 나은:
<a id="myLink" href="#" onclick="MyFunction();return false;">link text</a>
더 나은 1 :
<a id="myLink" title="Click to do something"
href="#" onclick="MyFunction();return false;">link text</a>
더 나은 2 :
<a id="myLink" title="Click to do something"
href="PleaseEnableJavascript.html" onclick="MyFunction();return false;">link text</a>
왜 더 좋아? return false
브라우저가 링크를 따라 가지 못하게 하기 때문에
베스트:
jQuery 또는 기타 유사한 프레임 워크를 사용하여 요소의 ID별로 클릭 핸들러를 첨부하십시오.
$('#myLink').click(function(){ MyFunction(); return false; });
답변
의 관점에서 자바 스크립트 한 차이가 있다는 것이다 this
에서 키워드 onclick
핸들러가 그 DOM 요소를 참조한다 onclick
속성이 (이 경우 인 <a>
반면, 요소) this
에서 href
받는 참조 할 속성 window
오브젝트.
표현 측면에서 , href
속성이 링크 (예 :)에없는 경우 <a onclick="[...]">
기본적으로 브라우저는 링크가 아닌 앵커로 취급하기 때문에 커서 text
가 자주 표시되는 커서가 아닌 커서 를 표시합니다 .pointer
<a>
동작 측면 에서을 통해 탐색을 통해 작업을 지정할 때 href
브라우저는 일반적으로 href
바로 가기 또는 상황에 맞는 메뉴를 사용하여 별도의 창에서 열 수 있도록 지원 합니다. 를 통해서만 동작을 지정할 때는 불가능합니다 onclick
.
그러나 DOM 객체를 클릭하여 동적 작업을 수행하는 가장 좋은 방법이 무엇인지 묻는다면 문서의 내용과 별도로 Javascript를 사용하여 이벤트를 첨부하는 것이 가장 좋습니다. 여러 가지 방법으로이 작업을 수행 할 수 있습니다. 일반적인 방법은 jQuery와 같은 자바 스크립트 라이브러리를 사용하여 이벤트를 바인딩하는 것입니다.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<a id="link" href="http://example.com/action">link text</a>
<script type="text/javascript">
$('a#link').click(function(){ /* ... action ... */ })
</script>
답변
나는 사용한다
Click <a nohref style="cursor:pointer;color:blue;text-decoration:underline"
onClick="alert('Hello World')">HERE</a>
먼 길이지만 작업이 완료됩니다. A 스타일을 사용하여 단순화하면 다음과 같습니다.
<style> A {cursor:pointer;color:blue;text-decoration:underline; } </style>
<a nohref onClick="alert('Hello World')">HERE</a>
답변
여기의 모든 것 외에도 href는 브라우저의 상태 표시 줄에 표시되고 클릭하지 않습니다. 자바 스크립트 코드를 보여주는 것은 사용자 친화적이지 않다고 생각합니다.
답변
이를 수행하는 가장 좋은 방법은 다음과 같습니다.
<a href="#" onclick="someFunction(e)"></a>
문제는 브라우저의 페이지 URL 끝에 해시 (#)를 추가하므로 사용자가 뒤로 버튼을 두 번 클릭하여 페이지로 이동해야한다는 것입니다. 이를 고려하여 이벤트 전파를 중지하는 코드를 추가해야합니다. 대부분의 자바 스크립트 툴킷에는 이미이 기능이 있습니다. 예를 들어, dojo 툴킷은
dojo.stopEvent(event);
그렇게하기 위해.
답변
가장 좋은 대답은 매우 나쁜 습관입니다. 빈 해시에 연결하면 절대로 문제가 발생하지 않습니다.
그러나 다른 많은 사람들이 언급했듯이 이벤트 핸들러를 요소에 바인딩하는 것이 가장 좋습니다. <a href="javascript:doStuff();">do stuff</a>
모든 최신 브라우저에서 완벽하게 작동하며 템플릿을 렌더링 할 때 광범위하게 사용하여 각 인스턴스에 대해 리 바인드하지 않아도됩니다. 경우에 따라이 접근 방식은 더 나은 성능을 제공합니다. YMMV
또 다른 흥미로운 tid-bit ….
onclick
& href
자바 스크립트를 직접 호출 할 때 다른 동작이 있습니다.
onclick
this
컨텍스트를 올바르게 전달 하는 반면 href
, <a href="javascript:doStuff(this)">no context</a>
작동하지 않거나 다른 방식으로 는 작동하지 않습니다.<a onclick="javascript:doStuff(this)">no context</a>
것입니다.
그렇습니다 href
. 그것이 사양을 따르지는 않지만 모든 브라우저에서 작동하지만 이상적으로 href="javascript:void(0);"
는 좋은 측정을 위해 포함해야합니다.
