Saya ingin menjalankan JavaScript sederhana fungsi di klik tanpa pengarahan.
Apakah ada perbedaan atau manfaat antara meletakkan JavaScript memanggil href
atribut (seperti ini:
<a href="javascript:my_function();window.print();">....</a>
) vs memasukkannya ke dalam onclick
atribut (mengikat ke onclick
event)?
bad:
<a id="myLink" href="javascript:MyFunction();">link text</a>
yang baik:
<a id="myLink" href="#" onclick="MyFunction();">link text</a>
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 false
akan mencegah browser dari berikut link
terbaik:
Menggunakan jQuery atau kerangka yang sama untuk melampirkan handler onclick oleh elemen's ID.
$('#myLink').click(function(){ MyFunction(); return false; });
Menempatkan onclick dalam href akan menyinggung perasaan orang-orang yang sangat percaya pada pemisahan isi dari perilaku/tindakan. Argumen adalah bahwa konten html anda harus tetap berfokus pada konten, bukan pada presentasi atau perilaku.
Khas jalan hari ini adalah dengan menggunakan javascript library (misalnya. jquery) dan membuat sebuah event handler yang menggunakan perpustakaan. Itu akan terlihat seperti ini:
$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );
Dalam hal javascript, salah satu perbedaan adalah bahwa ini
kata kunci di onclick
handler akan mengacu pada elemen DOM yang onclick
atribut itu (dalam hal ini <a>
elemen), sedangkan ini
di href
atribut akan mengacu pada jendela
objek.
Dalam hal presentation, jika href
atribut absen dari link (yaitu <a onclick="[...]">
) maka, secara default, browser akan menampilkan teks
kursor (dan tidak sering diinginkan pointer
kursor) karena memperlakukan <a>
sebagai jangkar, dan bukan link.
Dalam hal behavior, ketika menentukan suatu tindakan dengan navigasi melalui href
, browser biasanya akan mendukung pembukaan yang href
dalam jendela terpisah dengan menggunakan shortcut atau menu konteks. Hal ini tidak mungkin ketika menentukan suatu tindakan hanya melalui onclick
.
Namun, jika anda're bertanya apa adalah cara terbaik untuk mendapatkan tindakan yang dinamis dari klik objek DOM, kemudian melampirkan sebuah acara menggunakan javascript terpisah dari isi dokumen adalah cara terbaik untuk pergi. Anda dapat melakukan ini dalam beberapa cara. Cara yang umum adalah dengan menggunakan library javascript seperti jQuery untuk mengikat sebuah acara:
<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>
Saya menggunakan
Click <a nohref style="cursor:pointer;color:blue;text-decoration:underline"
onClick="alert('Hello World')">HERE</a>
Panjang jalan di sekitar namun mendapatkan pekerjaan yang dilakukan. menggunakan gaya untuk menyederhanakan maka menjadi:
<style> A {cursor:pointer;color:blue;text-decoration:underline; } </style>
<a nohref onClick="alert('Hello World')">HERE</a>
cara terbaik untuk melakukan ini adalah dengan:
<a href="#" onclick="someFunction(e)"></a>
Masalahnya adalah bahwa ini AKAN menambahkan hash (#) untuk akhir halaman's URL di browser, sehingga mengharuskan pengguna untuk mengklik kembali tombol dua kali untuk pergi ke halaman sebelum anda. Mengingat hal ini, anda perlu menambahkan beberapa kode untuk menghentikan acara propagasi. Paling javascript toolkit sudah akan memiliki fungsi untuk ini. Misalnya, dojo toolkit menggunakan
dojo.stopEvent(event);
untuk melakukannya.
Atas jawabannya yang sangat buruk praktek, salah satu harus tidak pernah pernah link ke kosong hash seperti itu dapat membuat masalah di jalan.
Yang terbaik adalah untuk mengikat sebuah event handler untuk elemen seperti banyak orang lain telah menyatakan, bagaimanapun, <a href="javascript:doStuff();">melakukan hal-hal</a>
bekerja sempurna di setiap browser modern, dan saya menggunakannya secara ekstensif ketika render template untuk menghindari harus rebind untuk setiap contoh. Dalam beberapa kasus, pendekatan ini menawarkan kinerja yang lebih baik. YMMV
Lain yang menarik tid-bit....
onclick
& href
memiliki perilaku yang berbeda ketika memanggil javascript ini diatas.
onclick
akan lulus ini
konteks dengan benar, sedangkan href
tidak't, atau dengan kata lain <a href="javascript:doStuff(ini)">tidak ada konteks</a>
tidak't bekerja, sedangkan <a onclick="javascript:doStuff(ini)">tidak ada konteks</a>
akan.
Ya, saya dihilangkan href
. Sementara itu doesn't mengikuti spec, ia akan bekerja di semua browser, meskipun, idealnya harus mencakup href="javascript:void(0);,"
untuk mengukur baik
Setelah javascript:
dalam setiap atribut yang bukan't khusus untuk scripting merupakan metode usang HTML. Sementara secara teknis kerjanya, anda're masih menetapkan javascript sifat non-script atribut, yang isn't praktek yang baik. Ia bahkan bisa gagal di browser lama, atau bahkan beberapa yang modern (yang googled forum post seemd untuk menunjukkan bahwa Opera tidak seperti 'javascript:' url).
Sebuah praktek yang lebih baik akan menjadi cara yang kedua, untuk menempatkan javascript anda ke onclick
atribut, yang diabaikan jika tidak ada scripting fungsi yang tersedia. Tempat URL yang valid di href bidang (umumnya '#') untuk mundur bagi mereka yang tidak memiliki javascript.
Secara pribadi, saya menemukan menempatkan javascript panggilan di HREF tag menjengkelkan. Biasanya saya don't benar-benar memperhatikan apakah atau tidak sesuatu adalah javascript link atau tidak, dan sering kali ingin membuka hal-hal di jendela baru. Ketika saya mencoba melakukan ini dengan satu jenis tautan ini, saya mendapatkan halaman kosong dengan tidak ada yang di atasnya dan javascript di lokasi saya bar. Namun, hal ini mengesampingkan sedikit dengan menggunakan onlick.
Satu hal lagi yang saya perhatikan ketika menggunakan "href" dengan javascript:
Script di "href" atribut won't akan dieksekusi jika perbedaan waktu antara 2 klik yang cukup singkat.
Sebagai contoh, cobalah untuk menjalankan contoh berikut dan klik ganda (cepat!) pada masing-masing link. Link pertama akan dieksekusi hanya sekali. Link kedua akan dilaksanakan 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>
Direproduksi di Chrome (double klik) dan IE11 (dengan double klik). Di Chrome jika anda klik yang cukup cepat, anda dapat membuat 10 klik dan hanya memiliki 1 fungsi eksekusi.
Firefox bekerja ok.
Pertama, memiliki url di href
adalah yang terbaik karena memungkinkan pengguna untuk menyalin link terbuka di tab lain, dll.
Dalam beberapa kasus (misalnya situs dengan sering HTML perubahan) tidak praktis untuk mengikat link setiap kali ada update.
Normal link:
<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 dan doesn't harus mengulangi panggilan fungsi di setiap link.
Jika anda don't ingin mengikat setiap waktu, namun, anda dapat menggunakan onclick dan lulus dalam 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 metode ini adalah bahwa anda dapat memuat link baru (misalnya via AJAX) kapanpun anda inginkan tanpa harus khawatir tentang mengikat setiap waktu.
<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>