Bagaimana cara menggunakan tautan untuk memanggil JavaScript?

166

Bagaimana cara menggunakan tautan untuk memanggil kode JavaScript?

javascript Jin Yong
sumber

Jawaban:

192 
<a onclick="jsfunction()" href="#">

atau 

<a onclick="jsfunction()" href="javascript:void(0);">

Edit:

Respons di atas benar-benar bukan solusi yang baik, setelah belajar banyak tentang JS sejak pertama kali saya posting. Lihat jawaban EndangeredMassa di bawah ini untuk pendekatan yang lebih baik untuk menyelesaikan masalah ini.

Chelsea
sumber
11
Saya akan merekomendasikan yang kedua, karena yang pertama akan menggulung Anda ke bagian atas halaman.
Matt Grande
7
Ya pasti akan, kecuali jika Anda menambahkan "return false;" setelah fungsi Anda.
Chelsea
26
Ini adalah kode 1998. Gunakan salah satu solusi yang tidak mengganggu. Silahkan.
Andrew Hedges
7
Gunakan tidak satu pun! Tautan untuk menautkan, itu bukan elemen tiruan untuk memanggil javascript.
I.devries
4
jika Anda akan meletakkan javascript sebaris melakukannya dengan cara ini: <a onclick="jsfunction;return false" href="linkasnormal">
Fire Crow
201

JavaScript tidak mengganggu, tidak ada ketergantungan perpustakaan:

<html>
<head>
    <script type="text/javascript">

        // Wait for the page to load first
        window.onload = function() {

          //Get a reference to the link on the page
          // with an id of "mylink"
          var a = document.getElementById("mylink");

          //Set code to run when the link is clicked
          // by assigning a function to "onclick"
          a.onclick = function() {

            // Your code here...

            //If you don't want the link to actually 
            // redirect the browser to another page,
            // "google.com" in our example here, then
            // return false at the end of this block.
            // Note that this also prevents event bubbling,
            // which is probably what we want here, but won't 
            // always be the case.
            return false;
          }
        }
    </script>
</head>
<body>
    <a id="mylink" href="http://www.google.com">linky</a>        
</body>
</html>
Massa yang Terancam Punah
sumber
26
Bisakah Anda menjelaskan mengapa ini lebih baik daripada jawaban yang saat ini diterima, dan ke mana skrip harus berada di halaman (karena ini jelas pertanyaan tingkat pemula)?
Bill the Lizard
8
Tentu saja. Diperbarui.
EndangeredMassa
6
Jadi apa yang saya masukkan hrefjika saya tidak ingin mengarahkan ulang pengguna dan hanya ingin menjalankan beberapa kode? Edit: Saya melihat bahwa hal itu dapat kosong kiri: href="".
SabreWolfy
6
Mengapa lebih baik menambahkan onclickacara melalui window.onload, daripada meletakkan onclicklangsung di <a>tag?
Nathan Reed
10
Bagaimana jika salah satu kekhawatiran Anda adalah bahwa Anda tidak ingin memisahkan unit kerja fungsional Anda menjadi tempat fisik yang berbeda dalam file sumber Anda, atau menyebar ke banyak file sumber. Jika Anda meletakkan panggilan javascript di tag href Anda, itu sangat jelas dengan melihat satu baris apa yang terjadi. Saya akan khawatir tentang memisahkan fungsi itu menjadi tempat fisik yang berbeda di mana lebih sulit untuk mendapatkan gambaran tentang apa yang terjadi. Mungkin itu hanya gayaku.
stu
47 
<a href="javascript:alert('Hello!');">Clicky</a>

EDIT, bertahun-tahun kemudian: TIDAK! Jangan pernah melakukan ini! Saya masih muda dan bodoh!

Edit, lagi: Beberapa orang bertanya mengapa Anda tidak harus melakukan ini. Ada beberapa alasan:

  1. Presentasi: HTML harus fokus pada presentasi. Menempatkan JS di HREF berarti HTML Anda sekarang, agak, berurusan dengan logika bisnis.

  2. Keamanan: Javascript di HTML Anda seperti itu melanggar Kebijakan Keamanan Konten (CSP) . Kebijakan Keamanan Konten (CSP) adalah lapisan keamanan tambahan yang membantu mendeteksi dan mengurangi jenis serangan tertentu, termasuk Cross-Site Scripting (XSS) dan serangan injeksi data. Serangan-serangan ini digunakan untuk apa saja mulai dari pencurian data hingga perusakan situs atau distribusi malware. Baca lebih lanjut di sini .

  3. Aksesibilitas: Tag jangkar untuk menghubungkan ke dokumen / halaman / sumber daya lain. Jika tautan Anda tidak ke mana-mana, itu harus berupa tombol . Ini membuatnya jauh lebih mudah bagi pembaca layar, terminal braille, dll, untuk menentukan apa yang terjadi, dan memberikan informasi yang bermanfaat bagi pengguna yang memiliki keterbatasan penglihatan.

Matt Grande
sumber
16
Mungkin beberapa deskripsi masalah dengan metode ini? Apakah ini lebih buruk dari href='#'dan alert()di dalam onclick?
Thomas Ahle
3
Saya baru mengenal javascript dan tidak mengerti apa yang salah dengan ini .. Penjelasan apa pun akan menyenangkan
nilanjanaLodh
1
Hai, saya juga tidak yakin mengapa tidak menggunakan ini? Saya terjebak dalam skenario di mana saya perlu memanggil fungsi JS, tetapi yang bisa saya tentukan hanyalah tautan. Dan solusi Anda berhasil.
skapie19
43

Dan, mengapa tidak mengganggu dengan jQuery:

  $(function() {
    $("#unobtrusive").click(function(e) {
      e.preventDefault(); // if desired...
      // other methods to call...
    });
  });

HTML

<a id="unobtrusive" href="http://jquery.com">jquery</a>
Tuan Lucky
sumber
2
Apakah ini akan berfungsi untuk SEO sehingga crawler akan menemukan tautan dan mengikutinya?
Ahi Tuna
11
karena tidak semua orang menggunakan jquery.
stu
1
@GregMiernicki Ya dan tidak, tergantung pada apa yang Anda maksud dengan tautan. Lihatlah HTML. Webcrawler atau klien apa pun dengan javascript dimatikan akan mengunjungi HREF yang diberikan. Klien yang diaktifkan dengan Javascript akan menjalankan tindakan klik dan KEMUDIAN mengikuti tautan jika fungsi itu tidak mengembalikan nilai yang salah atau panggilan preventDefault. Dalam hal ini, href adalah mundur, karenanya mengapa disebut "tidak mencolok"
Evan Langlois
12

Javascript Unobtrusive memiliki banyak keuntungan, berikut adalah langkah-langkah yang diambil dan mengapa itu baik untuk digunakan.

  1. tautan dimuat seperti biasa:

    <a id="DaLink" href="http://host/toAnewPage.html"> klik di sini </a>

ini penting karena ini akan berfungsi untuk browser dengan javascript tidak diaktifkan, atau jika ada kesalahan dalam kode javascript yang tidak berfungsi.

  1. javascript berjalan pada pemuatan halaman:

     window.onload = function(){
        document.getElementById("DaLink").onclick = function(){
               if(funcitonToCall()){
                   // most important step in this whole process
                   return false;
               }
        }
 }

  2. jika javascript berjalan dengan sukses, mungkin memuat konten di halaman saat ini dengan javascript, false return membatalkan tautan yang diaktifkan. dengan kata lain menempatkan return false memiliki efek menonaktifkan tautan jika javascript berhasil dijalankan. Meskipun memungkinkan untuk berjalan jika javascript tidak, buat cadangan yang bagus sehingga konten Anda ditampilkan dengan cara apa pun, untuk mesin pencari dan jika kode Anda rusak, atau dilihat pada sistem non-javascript.

buku terbaik tentang masalah ini adalah "Dom Scription" oleh Jeremy Keith

Fire Crow
sumber
9

Atau, jika Anda menggunakan PrototypeJS

<script type="text/javascript>
  Event.observe( $('thelink'), 'click', function(event) {
      //do stuff

      Event.stop(event);
  }
</script>

<a href="#" id="thelink">This is the link</a>
Mark Biek
sumber
1
Saya suka tidak harus menempatkan fungsi penanganan acara secara online.
Mark Biek
1
Itu satu-satunya cara untuk pergi. Harap beri suara jawaban inline. Ini adalah praktik yang tidak ada alasan hari ini.
Andrew Hedges
5
@Andrew: Silakan tinggalkan komentar bersama dengan downvote Anda menjelaskan mengapa jawaban inline buruk.
Bill the Lizard
8

Saya pikir Anda dapat menggunakan onclick acara ini, sesuatu seperti ini:

<a onclick="jsFunction();">
David Z
sumber
0

berdasarkan penggunaan jawaban @mister_lucky dengan jquery:

$('#unobtrusive').on('click',function (e) {
    e.preventDefault(); //optional
    //some code
});

Kode Html:

<a id="unobtrusive" href="http://jquery.com">jquery</a>
Mostafa Asadi
sumber
-2

cukup gunakan javascript: ---- contoh

javascript:var JFL_81371678974472 = new JotformFeedback({ formId: '81371678974472', base: 'https://form.jotform.me/', windowTitle: 'Photobook Series', background: '#e44c2a', fontColor: '#FFFFFF', type: 'false', height: 700, width: 500, openOnLoad: true })
Domi S Herdian
sumber