리디렉션없이 클릭으로 간단한 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 자바 스크립트를 직접 호출 할 때 다른 동작이 있습니다.
onclickthis컨텍스트를 올바르게 전달 하는 반면 href, <a href="javascript:doStuff(this)">no context</a>작동하지 않거나 다른 방식으로 는 작동하지 않습니다.<a onclick="javascript:doStuff(this)">no context</a> 것입니다.
그렇습니다 href. 그것이 사양을 따르지는 않지만 모든 브라우저에서 작동하지만 이상적으로 href="javascript:void(0);"는 좋은 측정을 위해 포함해야합니다.
