Fungsi JavaScript di href vs onclick

475

Saya ingin menjalankan fungsi JavaScript sederhana pada klik tanpa pengalihan.

Apakah ada perbedaan atau manfaat antara menempatkan panggilan JavaScript dalam hrefatribut (seperti ini:

<a href="javascript:my_function();window.print();">....</a>

) vs. menempatkannya di onclickatribut (mengikatnya ke onclickacara)?

SkunkSpinner
sumber
5
Pertanyaan ini telah dibahas sebelumnya: stackoverflow.com/questions/245868/…
SolutionYogi

Jawaban:

276

Meletakkan onclick di dalam href akan menyinggung orang-orang yang sangat percaya pada pemisahan konten dari perilaku / tindakan. Argumennya adalah bahwa konten html Anda harus tetap fokus hanya pada konten, bukan pada presentasi atau perilaku.

Path khas hari ini adalah menggunakan pustaka javascript (mis. Jquery) dan membuat event handler menggunakan pustaka itu. Itu akan terlihat seperti:

$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );
Parand
sumber
1
Atau mootool, prototipe, dojo ... atau polos pada javascript, tapi itu akan menjadi kode yang jauh lebih banyak tetapi layak dilakukan.
Ryan Florence
15
Jika Anda tidak perlu melakukan apa pun dengan objek acara, javascript biasa cukup sederhana. Dapatkan simpul DOM dengan obj = document.getElementById (), lalu atur obj.onclick = foo
Matt Bridges
1
bagaimana dengan pemisahan konten ketika <a href> dibuat dengan cepat, katakanlah, di jendela sembulan, dan Anda masih memerlukan perilaku klik khusus?
Serge
6
Tapi bukankah pertanyaan yang diajukan tentang perbedaan antara memasukkan panggilan JS inline hrefversus inline onclick? Dengan asumsi Anda akan memasukkannya karena alasan tertentu, mana yang harus Anda gunakan? (Dalam praktiknya saya akan melakukan apa yang Anda sarankan, tetapi Anda tampaknya telah melompati perbedaan antara dua atribut.)
nnnnnn
1
Satu kali saya akan menganjurkan untuk menempatkan panggilan fungsi sebaris vs memiliki acara onclick untuk tautan adalah jika Anda secara dinamis membuat tautan dalam halaman yang semuanya akan memanggil fungsi yang sama tetapi mungkin tidak memiliki id unik. Saya memiliki formulir web di mana pengguna dapat menambah dan menghapus item dan saya meletakkan onclick di href dari tautan di dalam div yang dibuat secara dinamis sehingga saya bisa memulai proses pengolahan skrip dengan lebih cepat daripada menggunakan sesuatu yang kurang spesifik seperti id relatif atau nama kelas.
MistyDawn
977

buruk:

<a id="myLink" href="javascript:MyFunction();">link text</a>

baik:

<a id="myLink" href="#" onclick="MyFunction();">link text</a>

lebih baik:

<a id="myLink" href="#" onclick="MyFunction();return false;">link text</a>

bahkan lebih baik 1:

<a id="myLink" title="Click to do something"
 href="#" onclick="MyFunction();return false;">link text</a>

bahkan lebih baik 2:

<a id="myLink" title="Click to do something"
 href="PleaseEnableJavascript.html" onclick="MyFunction();return false;">link text</a>

Mengapa lebih baik karena return falseakan mencegah browser mengikuti tautan

terbaik:

Gunakan jQuery atau kerangka kerja serupa lainnya untuk melampirkan handler onclick dengan ID elemen.

$('#myLink').click(function(){ MyFunction(); return false; });
demp
sumber
21
Akan ada solusi lain yang akan menjadi yang terbaik di mana hreftidak diatur ke #tetapi ke tautan aktual untuk browser noJS.
helly0d
6
Bagaimana jika saya memberi tahu Anda bahwa hanya yang pertama (buruk) yang bekerja dengan cara yang sama (benar) di semua browser dengan middleclick.
Vloxxity
14
Apa yang buruk tentang <a id="myLink" href="javascript:MyFunction();">?
Vaddadi Kartick
6
Hanya 5 sen saya yang sederhana: opsi "yang terbaik" adalah menggunakan tombol untuk klik (peristiwa klik?) Dan meninggalkan jangkar dengan href mereka untuk apa niat desain asli mereka di tempat pertama: menjadi jangkar untuk tautan ke halaman lain.
nidalpres
4
Ikatan klik dengan javascript memiliki satu kelemahan: Nanti ketika Anda men-debug bentuk orang lain, sangat sulit untuk menemukan di mana dan jenis javascript apa yang mengikat elemen itu.
Maarten Kieft
69

Dalam hal javascript , satu perbedaan adalah bahwa thiskata kunci dalam onclickhandler akan merujuk ke elemen DOM yang onclickatributnya adalah (dalam hal ini <a>elemen), sedangkan thisdalam hrefatribut akan merujuk ke windowobjek.

Dalam hal penyajian , jika suatu hrefatribut tidak ada dari tautan (yaitu <a onclick="[...]">) maka, secara default, browser akan menampilkan textkursor (dan bukan kursor yang sering diinginkan pointer) karena itu memperlakukan <a>sebagai jangkar, dan bukan tautan.

Dalam hal perilaku , saat menentukan tindakan melalui navigasi href, browser biasanya akan mendukung pembukaan hrefdi jendela terpisah menggunakan pintasan atau menu konteks. Ini tidak mungkin ketika menentukan tindakan hanya melalui onclick.


Namun, jika Anda bertanya apa cara terbaik untuk mendapatkan tindakan dinamis dari klik objek DOM, maka melampirkan acara menggunakan javascript terpisah dari konten dokumen adalah cara terbaik untuk melakukannya. Anda bisa melakukan ini dengan beberapa cara. Cara yang umum adalah dengan menggunakan pustaka javascript seperti jQuery untuk mengikat suatu peristiwa:

<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>
Adam
sumber
9
Terima kasih telah mengonfirmasi kecurigaan saya bahwa "ini" berbeda dalam "href" vs "onclick".
joonas.fi
17

saya menggunakan

Click <a nohref style="cursor:pointer;color:blue;text-decoration:underline"
onClick="alert('Hello World')">HERE</a>

Jauh tetapi itu menyelesaikan pekerjaan. gunakan gaya A untuk menyederhanakan kemudian menjadi:

<style> A {cursor:pointer;color:blue;text-decoration:underline; } </style> 
<a nohref onClick="alert('Hello World')">HERE</a>
Clif Collins
sumber
10
+1 Sangat bagus! :-) Saya belum pernah mendengar tentang nohrefatribut sebelumnya. Ini adalah cara paling logis / elegan untuk menangani tindakan javascript tersebut. Ini kompatibel dengan FF12 dan IE8. Karena itu saya akan mengganti semua href="JavaScript:void(0);"dengan saya nohref. Terima kasih banyak. Bersulang.
olibre
7
itu tidak didukung oleh browser utama, mengapa kita harus menggunakan ini? w3schools.com/tags/att_area_nohref.asp
hetaoblog
11
nohrefadalah bagian dari areatag, bukan a! Contoh Anda sama dengan<a onClick="alert('Hello World')">HERE</a>
nZeus
6
Hanya "jangan lakukan peringatan ini". Ini benar-benar saran yang tidak standar dan buruk. nohreftidak ada pada atag.
Colin 't Hart
11

Selain semua yang ada di sini, href ditampilkan pada bilah status browser, dan onclick tidak. Saya pikir itu tidak ramah pengguna untuk menampilkan kode javascript di sana.

Kamarey
sumber
10

cara terbaik untuk melakukan ini adalah dengan:

<a href="#" onclick="someFunction(e)"></a>

Masalahnya adalah bahwa ini AKAN menambahkan hash (#) ke akhir halaman URL di browser, sehingga mengharuskan pengguna untuk mengklik tombol kembali dua kali untuk pergi ke halaman sebelum Anda. Mempertimbangkan hal ini, Anda perlu menambahkan beberapa kode untuk menghentikan propagasi acara. Kebanyakan toolkit javascript sudah memiliki fungsi untuk ini. Sebagai contoh, dojo toolkit digunakan

dojo.stopEvent(event);

untuk melakukannya.

linusthe3rd
sumber
9
Saya ingin memperingatkan bahwa jika Anda menggunakan href="#"browser akan mencari tag anchor bernama dan karena itu tidak akan menemukannya, maka itu akan membuat jendela untuk menggulir ke bagian atas halaman, sesuatu yang mungkin tidak akan terlihat jika Anda sudah di atas. Untuk menghindari perilaku ini, gunakan: href="javascript:;"sebagai gantinya.
alonso.torres
1
@ alonso.torres Poin bagus, tapi itu sebabnya saya menyebutkan penggunaan dojo.stopEvent () - itu akan menghentikan propagasi / penggelembungan acara dan perilaku default mengklik jangkar.
linusthe3rd
7
Alih-alih stopEvent, mengapa tidak hanya mengembalikan false (onclick = "someFunction (e); return false;")
stracktracer
10

Jawaban teratas adalah praktik yang sangat buruk, orang seharusnya tidak pernah menghubungkan ke hash kosong karena dapat membuat masalah di jalan.

Yang terbaik adalah untuk mengikat pengendali acara ke elemen seperti banyak orang lain telah menyatakan, bagaimanapun, <a href="javascript:doStuff();">do stuff</a>berfungsi dengan baik di setiap browser modern, dan saya menggunakannya secara luas ketika rendering templat untuk menghindari keharusan rebind untuk setiap contoh. Dalam beberapa kasus, pendekatan ini menawarkan kinerja yang lebih baik. YMMV

Lain tid-bit menarik ....

onclick& hrefmemiliki perilaku berbeda saat memanggil javascript secara langsung.

onclickakan melewati thiskonteks dengan benar, sedangkan hreftidak akan, atau dengan kata lain <a href="javascript:doStuff(this)">no context</a>tidak akan berfungsi, sedangkan <a onclick="javascript:doStuff(this)">no context</a>akan.

Ya, saya menghapus href. Meskipun itu tidak mengikuti spesifikasi, itu akan bekerja di semua browser, meskipun, idealnya harus mencakup href="javascript:void(0);"ukuran yang baik

Eduardo
sumber
8

Memiliki javascript:atribut apa pun yang tidak khusus untuk skrip adalah metode HTML yang sudah ketinggalan zaman. Meskipun secara teknis berfungsi, Anda masih menetapkan properti javascript ke atribut non-skrip, yang bukan praktik yang baik. Ia bahkan dapat gagal di browser lama, atau bahkan yang modern (posting forum yang di-google tampaknya mengindikasikan bahwa Opera tidak menyukai 'javascript:' url).

Praktik yang lebih baik akan menjadi cara kedua, untuk menempatkan javascript Anda ke dalam onclickatribut, yang diabaikan jika tidak ada fungsi skrip yang tersedia. Tempatkan URL yang valid di bidang href (biasanya '#') untuk mundur bagi mereka yang tidak memiliki javascript.

zombat
sumber
1
Saya tidak melihat bagaimana ada perbedaan antara 'javascript:' href dan '#' href dengan atribut onclick. Keduanya sama-sama tidak berguna untuk browser tanpa JS diaktifkan.
harto
2
harto, itu sebenarnya tidak benar. '#' adalah indikator untuk tautan bernama, ini bukan pengidentifikasi javascript. Ini adalah URL yang valid, dan tidak memerlukan Javascript untuk dikenali.
zombat
8

ini bekerja untuk saya menggunakan baris kode ini:

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

Ini bekerja

<a href="#" id="sampleApp" onclick="myFunction(); return false;">Click Here</a>
TitusMix
sumber
3
Selamat Datang di Stack Overflow! Sementara potongan kode ini dapat menyelesaikan pertanyaan, termasuk penjelasan sangat membantu untuk meningkatkan kualitas posting Anda. Ingatlah bahwa Anda menjawab pertanyaan untuk pembaca di masa depan, dan orang-orang itu mungkin tidak tahu alasan untuk saran kode Anda. Tolong juga cobalah untuk tidak membuat kerumunan kode Anda dengan komentar penjelasan, karena ini mengurangi keterbacaan kode dan penjelasan!
Selamat tinggal StackExchange
2
Kode ini tidak berfungsi. return: false tidak valid. Itu harus kembali salah.
hbulens
5

Secara pribadi, saya menemukan menempatkan panggilan javascript di tag HREF mengganggu. Saya biasanya tidak benar-benar memperhatikan apakah ada sesuatu yang merupakan tautan javascript atau tidak, dan sering kali ingin membuka sesuatu di jendela baru. Ketika saya mencoba melakukan ini dengan salah satu dari jenis tautan ini, saya mendapatkan halaman kosong tanpa apa-apa di atasnya dan javascript di bilah lokasi saya. Namun, ini sedikit dikesampingkan dengan menggunakan onlick.

Peter
sumber
3

Satu hal lagi yang saya perhatikan ketika menggunakan "href" dengan javascript:

Script dalam atribut "href" tidak akan dieksekusi jika perbedaan waktu antara 2 klik cukup singkat.

Misalnya, coba jalankan contoh berikut dan klik dua kali (cepat!) Pada setiap tautan. Tautan pertama akan dieksekusi hanya sekali. Tautan kedua akan dieksekusi dua kali.

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

Diproduksi ulang di Chrome (klik dua kali) dan IE11 (dengan klik tiga kali). Di Chrome jika Anda mengklik cukup cepat, Anda dapat membuat 10 klik dan hanya memiliki 1 fungsi eksekusi.

Firefox berfungsi dengan baik.

kolobok
sumber
3

Pertama, memiliki url hrefyang terbaik karena memungkinkan pengguna untuk menyalin tautan, buka di tab lain, dll.

Dalam beberapa kasus (misalnya situs dengan perubahan HTML yang sering) tidak praktis untuk mengikat tautan setiap kali ada pembaruan.

Metode Ikatan Khas

Tautan normal:

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

Dan sesuatu seperti ini untuk JS:

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

Manfaat dari metode ini adalah pemisahan markup dan perilaku yang bersih dan tidak harus mengulangi panggilan fungsi di setiap tautan.

Tidak Ada Metode Bind

Namun, jika Anda tidak ingin mengikat setiap kali, Anda dapat menggunakan onclick dan meneruskan elemen dan acara, misalnya:

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

Dan ini untuk JS:

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

Manfaat dari metode ini adalah Anda dapat memuat tautan baru (mis. Via AJAX) kapan pun Anda inginkan tanpa harus khawatir tentang pengikatan setiap saat.

jchavannes
sumber
1
 <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>   
Andrew
sumber
0

Saya mengalami bahwa javascript: hrefs tidak berfungsi ketika halaman disematkan dalam fitur halaman web Outlook di mana folder mail diatur untuk sebagai gantinya menunjukkan url

Kristen
sumber