리디렉션없이 클릭으로 간단한 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);"는 좋은 측정을 위해 포함해야합니다.

데 javascript: 스크립팅 구체적 아닌 임의의 속성은 HTML의 오래된 방법이다. 기술적으로는 작동하지만 여전히 자바 스크립트 속성을 비 스크립트 속성에 할당하는 것은 좋지 않습니다. 오래된 브라우저 또는 일부 최신 브라우저에서도 실패 할 수 있습니다 (Google 포럼 게시물은 Opera가 'javascript :'urls를 좋아하지 않음을 나타냅니다).

자바 스크립트를 onclick속성 에 넣는 두 번째 방법 은 스크립트 기능이없는 경우 무시하는 것이 좋습니다. 자바 스크립트가없는 사용자를 위해 href 필드에 유효한 URL (일반적으로 '#')을 입력하십시오.

이 코드 줄을 사용하여 나를 위해 일했습니다.

<a id="LinkTest" title="Any Title"  href="#" onclick="Function(); return false; ">text</a>

이 작동합니다

<a href="#" id="sampleApp" onclick="myFunction(); return false;">Click Here</a>

개인적으로 HREF 태그에 자바 스크립트 호출을하는 것이 성가신 것으로 나타났습니다. 나는 보통 무언가가 자바 스크립트 링크인지 아닌지에주의를 기울이지 않으며 종종 새 창에서 물건을 열고 싶어합니다. 이러한 유형의 링크 중 하나를 사용 하여이 작업을 시도하면 위치 표시 줄에 아무것도없는 빈 페이지가 표시됩니다. 그러나 이것은 onlick을 사용하여 조금 나아졌습니다.

Javascript와 함께 "href"를 사용할 때주의해야 할 사항이 하나 더 있습니다.

두 번의 클릭 사이의 시간 차이가 매우 짧은 경우 "href"속성의 스크립트가 실행되지 않습니다.

예를 들어, 다음 예제를 실행하고 각 링크에서 두 번 클릭 (빠른!)하십시오. 첫 번째 링크는 한 번만 실행됩니다. 두 번째 링크는 두 번 실행됩니다.

<script>
function myFunc() {
    var s = 0;
    for (var i=0; i<100000; i++) {
        s+=i;
    }
    console.log(s);
}
</script>
<a href="javascript:myFunc()">href</a>
<a href="#" onclick="javascript:myFunc()">onclick</a>

Chrome (더블 클릭) 및 IE11 (트리플 클릭)에서 재생되었습니다. Chrome에서 충분히 빠르게 클릭하면 10 번의 클릭만으로 1 회의 기능 만 실행할 수 있습니다.

Firefox는 정상적으로 작동합니다.

첫째, href사용자가 링크를 복사하거나 다른 탭에서 열 수 있도록하기 때문에 URL을 입력하는 것이 가장 좋습니다.

경우에 따라 (예 : HTML이 자주 변경되는 사이트) 업데이트가있을 때마다 링크를 바인딩하는 것은 실용적이지 않습니다.

일반적인 바인드 방법

일반 링크 :

<a href="https://www.google.com/">Google<a/>

그리고 JS의 경우 이와 같은 것 :

$("a").click(function (e) {
    e.preventDefault();
    var href = $(this).attr("href");
    window.open(href);
    return false;
});

이 방법의 장점은 마크 업과 동작을 명확하게 분리하여 모든 링크에서 함수 호출을 반복 할 필요가 없다는 것입니다.

바인드 방법 없음

그러나 매번 바인드하지 않으려면 onclick을 사용하여 요소와 이벤트를 전달하십시오.

<a href="https://www.google.com/" onclick="return Handler(this, event);">Google</a>

그리고 이것은 JS의 경우 :

function Handler(self, e) {
    e.preventDefault();
    var href = $(self).attr("href");
    window.open(href);
    return false;
}

이 방법의 장점은 매번 바인딩에 대해 걱정할 필요없이 원하는 때마다 AJAX를 통해 새 링크를로드 할 수 있다는 것입니다.

 <hr>
            <h3 class="form-signin-heading"><i class="icon-edit"></i> Register</h3>
            <button data-placement="top" id="signin_student" onclick="window.location='signup_student.php'" id="btn_student" name="login" class="btn btn-info" type="submit">Student</button>
            <div class="pull-right">
                <button data-placement="top" id="signin_teacher" onclick="window.location='guru/signup_teacher.php'" name="login" class="btn btn-info" type="submit">Teacher</button>
            </div>
        </div>
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_student').tooltip('show'); $('#signin_student').tooltip('hide');
                });
            </script>   
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_teacher').tooltip('show'); $('#signin_teacher').tooltip('hide');
                });
            </script>   

메일 폴더가 대신 URL을 표시하도록 설정된 Outlook의 웹 페이지 기능에 페이지가 포함되면 javascript : hrefs가 작동하지 않는다는 것을 경험했습니다.