wywołaj funkcję javascript po kliknięciu hiperłącza

Dynamicznie tworzę hiperłącze w kodzie C # za plikiem ASP.NET. Muszę wywołać funkcję JavaScript po kliknięciu klienta. jak to osiągnąć?

Jeszcze schludniej, zamiast typical href="#"or href="javascript:void"lub href="whatever", myślę, że ma to znacznie więcej sensu:

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>

Jeśli JavaScript się nie powiedzie, pojawi się informacja zwrotna. Ponadto wyeliminowane jest błędne zachowanie (przeskakiwanie stron w przypadku href="#"odwiedzania tej samej strony w przypadku href="").

Najprostsza odpowiedź brzmi:

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

Lub odpowiedz na pytanie o wywołanie funkcji javascript:

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

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

Za pomocą parametru onclick ...

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

Odpowiedź JQuery. Ponieważ JavaScript został wymyślony w celu rozwijania JQuery, podam wam przykład w JQuery, który robi to:

<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>

Wolę używać metody onclick zamiast href dla hiperłączy javascript. I zawsze używaj alertów, aby określić, jaką masz wartość.

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

Może być również używany na tagach wejściowych, np.

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

Najlepiej byłoby, gdybyś całkowicie unikał generowania linków w kodzie, ponieważ Twój kod będzie wymagał ponownej kompilacji za każdym razem, gdy będziesz chciał dokonać zmiany w „znacznikach” każdego z tych linków. Jeśli musisz to zrobić, nie osadziłbym twoich „wywołań” javascript w kodzie HTML, jest to zła praktyka, twoje znaczniki powinny opisywać twój dokument, a nie to, co robi, to jest zadanie twojego javascript.

Użyj podejścia, w którym masz określony identyfikator dla każdego elementu (lub klasy, jeśli jest to ich wspólna funkcja), a następnie użyj Progressive Enhancement, aby dodać obsługę zdarzeń, na przykład:

[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;
    }

W ten sposób Twój kod nie zepsuje się dla użytkowników z wyłączonym JS i będzie miał wyraźny rozdział obaw.

Mam nadzieję, że to się przyda.

Generalnie zalecałbym używanie element.attachEvent (IE) lub element.addEventListener (inne przeglądarki) zamiast bezpośredniego ustawiania zdarzenia onclick, ponieważ to drugie zastąpi wszelkie istniejące programy obsługi zdarzeń dla tego elementu.

attachEvent / addEventListening umożliwia utworzenie wielu programów obsługi zdarzeń.

Użyj onclickatrybutu HTML .

Moduł onclickobsługi zdarzeń przechwytuje zdarzenie kliknięcia przycisku myszy użytkownika na elemencie, do którego zastosowano onclickatrybut. Ta akcja zwykle powoduje wywołanie metody skryptu, takiej jak funkcja JavaScript [...]

Jeśli nie zaczekasz na załadowanie strony, nie będziesz mógł wybrać elementu według id. To rozwiązanie powinno działać dla każdego, kto ma problemy z uzyskaniem kodu do wykonania

<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>