Saya ingin menjalankan fungsi JavaScript sederhana pada klik tanpa pengalihan.
Apakah ada perbedaan atau manfaat antara menempatkan panggilan JavaScript dalam href
atribut (seperti ini:
<a href="javascript:my_function();window.print();">....</a>
) vs. menempatkannya di onclick
atribut (mengikatnya ke onclick
acara)?
javascript
href
SkunkSpinner
sumber
sumber
Jawaban:
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:
sumber
href
versus inlineonclick
? 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.)buruk:
baik:
lebih baik:
bahkan lebih baik 1:
bahkan lebih baik 2:
Mengapa lebih baik karena
return false
akan mencegah browser mengikuti tautanterbaik:
Gunakan jQuery atau kerangka kerja serupa lainnya untuk melampirkan handler onclick dengan ID elemen.
sumber
href
tidak diatur ke#
tetapi ke tautan aktual untuk browser noJS.Dalam hal javascript , satu perbedaan adalah bahwa
this
kata kunci dalamonclick
handler akan merujuk ke elemen DOM yangonclick
atributnya adalah (dalam hal ini<a>
elemen), sedangkanthis
dalamhref
atribut akan merujuk kewindow
objek.Dalam hal penyajian , jika suatu
href
atribut tidak ada dari tautan (yaitu<a onclick="[...]">
) maka, secara default, browser akan menampilkantext
kursor (dan bukan kursor yang sering diinginkanpointer
) karena itu memperlakukan<a>
sebagai jangkar, dan bukan tautan.Dalam hal perilaku , saat menentukan tindakan melalui navigasi
href
, browser biasanya akan mendukung pembukaanhref
di jendela terpisah menggunakan pintasan atau menu konteks. Ini tidak mungkin ketika menentukan tindakan hanya melaluionclick
.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:
sumber
saya menggunakan
Jauh tetapi itu menyelesaikan pekerjaan. gunakan gaya A untuk menyederhanakan kemudian menjadi:
sumber
nohref
atribut sebelumnya. Ini adalah cara paling logis / elegan untuk menangani tindakan javascript tersebut. Ini kompatibel dengan FF12 dan IE8. Karena itu saya akan mengganti semuahref="JavaScript:void(0);"
dengan sayanohref
. Terima kasih banyak. Bersulang.nohref
adalah bagian dariarea
tag, bukana
! Contoh Anda sama dengan<a onClick="alert('Hello World')">HERE</a>
nohref
tidak ada padaa
tag.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.
sumber
cara terbaik untuk melakukan ini adalah dengan:
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
untuk melakukannya.
sumber
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.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. YMMVLain tid-bit menarik ....
onclick
&href
memiliki perilaku berbeda saat memanggil javascript secara langsung.onclick
akan melewatithis
konteks dengan benar, sedangkanhref
tidak 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 mencakuphref="javascript:void(0);"
ukuran yang baiksumber
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
onclick
atribut, 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.sumber
ini bekerja untuk saya menggunakan baris kode ini:
sumber
Ini bekerja
sumber
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.
sumber
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.
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.
sumber
Pertama, memiliki url
href
yang 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:
Dan sesuatu seperti ini untuk JS:
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:
Dan ini untuk JS:
Manfaat dari metode ini adalah Anda dapat memuat tautan baru (mis. Via AJAX) kapan pun Anda inginkan tanpa harus khawatir tentang pengikatan setiap saat.
sumber
sumber
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
sumber