panggil fungsi javascript pada klik hyperlink

Saya secara dinamis membuat hyperlink dalam kode c # di belakang file ASP.NET. Saya perlu memanggil fungsi JavaScript saat klien diklik. bagaimana saya mencapai ini?

Lebih rapi lagi, daripada typical href="#"atau href="javascript:void"atau href="whatever", menurut saya ini lebih masuk akal:

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>

Jika Javascript gagal, ada beberapa umpan balik. Selanjutnya, perilaku tidak menentu (lompatan halaman dalam kasus href="#", mengunjungi halaman yang sama dalam kasus href="") dieliminasi.

Jawaban paling sederhana dari semuanya adalah ...

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

Atau untuk menjawab pertanyaan tentang memanggil fungsi javascript:

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

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

Dengan parameter onclick ...

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

Jawaban JQuery. Sejak JavaScript diciptakan untuk mengembangkan JQuery, saya memberi Anda contoh dalam JQuery melakukan ini:

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

Saya lebih suka menggunakan metode onclick daripada href untuk hyperlink javascript. Dan selalu gunakan peringatan untuk menentukan nilai apa yang Anda miliki.

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

Ini juga bisa digunakan pada tag masukan misalnya.

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

Idealnya saya akan menghindari membuat tautan dalam kode Anda di belakang sama sekali karena kode Anda perlu dikompilasi ulang setiap kali Anda ingin membuat perubahan pada 'markup' dari masing-masing tautan tersebut. Jika Anda harus melakukannya, saya tidak akan menyematkan 'panggilan' javascript Anda di dalam HTML Anda, ini adalah praktik yang buruk sama sekali, markup Anda harus mendeskripsikan dokumen Anda bukan apa fungsinya, itulah tugas javascript Anda.

Gunakan pendekatan di mana Anda memiliki id khusus untuk setiap elemen (atau kelas jika memiliki fungsi umum) dan kemudian gunakan Peningkatan Progresif untuk menambahkan pengendali kejadian, seperti:

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

Dengan cara itu kode Anda tidak akan rusak untuk pengguna dengan JS dinonaktifkan dan itu akan memiliki pemisahan kepentingan yang jelas.

Harapan itu berguna.

Saya biasanya akan merekomendasikan menggunakan element.attachEvent (IE) atau element.addEventListener (browser lain) daripada menyetel acara onclick secara langsung karena yang terakhir akan menggantikan penangan acara yang ada untuk elemen itu.

attachEvent / addEventListening memungkinkan beberapa event handler dibuat.

Gunakan onclickatribut HTML .

The onclickevent handler menangkap acara klik dari tombol mouse pengguna pada elemen mana onclickatribut diterapkan. Tindakan ini biasanya menghasilkan panggilan ke metode skrip seperti fungsi JavaScript [...]

Jika Anda tidak menunggu halaman dimuat, Anda tidak akan dapat memilih elemen dengan id. Solusi ini akan berfungsi untuk siapa saja yang mengalami masalah dalam mendapatkan kode untuk dieksekusi

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