하이퍼 링크 클릭시 자바 스크립트 함수 호출

ASP.NET 파일 뒤에있는 C # 코드에서 동적으로 하이퍼 링크를 만들고 있습니다. 클라이언트 클릭시 JavaScript 함수를 호출해야합니다. 어떻게해야합니까?

더 깔끔하게, typical href="#"또는 href="javascript:void"또는 대신 href="whatever"이것이 훨씬 더 의미가 있다고 생각합니다.

var el = document.getElementById('foo');
el.onclick = showFoo;


function showFoo() {
  alert('I am foo!');
  return false;
}

<a href="no-javascript.html" title="Get some foo!" id="foo">Show me some foo</a>

Javascript가 실패하면 피드백이 있습니다. 또한 비정상적인 동작 (의 경우 페이지 점프,의 경우 href="#"동일한 페이지 방문 href="")이 제거됩니다.

가장 간단한 대답은 ...

<a href="javascript:alert('You clicked!')">My link</a>

또는 자바 스크립트 함수 호출에 대한 질문에 답하려면 :

<script type="text/javascript">
function myFunction(myMessage) {
    alert(myMessage);
}
</script>

<a href="javascript:myFunction('You clicked!')">My link</a>

onclick 매개 변수를 사용하면 ...

<a href='http://www.google.com' onclick='myJavaScriptFunction();'>mylink</a>

JQuery 대답. JQuery를 개발하기 위해 JavaScript가 발명 되었기 때문에 다음과 같이 JQuery에서 예제를 제공합니다.

<div class="menu">
    <a href="http://example.org">Example</a>
    <a href="http://foobar.com">Foobar.com</a>
</div>

<script>
jQuery( 'div.menu a' )
    .click(function() {
        do_the_click( this.href );
        return false;
    });

// play the funky music white boy
function do_the_click( url )
{
    alert( url );
}
</script>

나는 자바 스크립트 하이퍼 링크에 href보다는 onclick 메소드를 사용하는 것을 선호합니다. 그리고 항상 경고를 사용하여 어떤 가치가 있는지 확인하십시오.

<a href='#' onclick='jsFunction();alert('it works!');'>Link</a>

입력 태그에도 사용할 수 있습니다.

<input type='button' value='Submit' onclick='jsFunction();alert('it works!');'>

이상적으로는 각 링크의 '마크 업'을 변경할 때마다 코드를 다시 컴파일해야하므로 코드 뒤에 링크를 생성하지 않는 것이 좋습니다. 당신이 그것을해야한다면 나는 당신의 자바 스크립트 '호출'을 HTML에 포함시키지 않을 것입니다. 그것은 모두 나쁜 습관입니다. 마크 업은 그것이하는 일이 아니라 문서를 설명해야합니다. 그게 당신의 자바 스크립트의 일입니다.

각 요소 (또는 공통 기능인 경우 클래스)에 대한 특정 ID가있는 접근 방식을 사용하고 다음과 같이 Progressive Enhancement를 사용하여 이벤트 핸들러를 추가합니다.

[c# example only probably not the way you're writing out your js]
Response.Write("<a href=\"/link/for/javascriptDisabled/Browsers.aspx\" id=\"uxAncMyLink\">My Link</a>");

[Javascript]  
document.getElementById('uxAncMyLink').onclick = function(e){

// do some stuff here

    return false;
    }

이렇게하면 JS가 비활성화 된 사용자에게 코드가 손상되지 않으며 우려 사항이 명확하게 구분됩니다.

그것이 사용되기를 바랍니다.

일반적으로 onclick 이벤트를 직접 설정하는 것보다 element.attachEvent (IE) 또는 element.addEventListener (다른 브라우저)를 사용하는 것이 좋습니다. 후자는 해당 요소에 대한 기존 이벤트 핸들러를 대체하기 때문입니다.

attachEvent / addEventListening을 사용하면 여러 이벤트 핸들러를 만들 수 있습니다.

onclickHTML 속성을 사용 합니다 .

onclick이벤트 핸들러는되는 요소에 대한 사용자의 마우스 버튼의 클릭 이벤트 캡처 onclick속성이 적용됩니다. 이 작업은 일반적으로 JavaScript 함수 [...]와 같은 스크립트 메서드를 호출합니다.

페이지가로드 될 때까지 기다리지 않으면 ID로 요소를 선택할 수 없습니다. 이 솔루션은 코드 실행에 문제가있는 모든 사용자에게 적합합니다.

<script type="text/javascript">
window.onload = function() {
    document.getElementById("delete").onclick = function() {myFunction()};

    function myFunction() {
        //your code goes here
        alert('Alert message here');
    }
};
</script>

<a href='#' id='delete'>Delete Document</a>