(Catatan Penerjemah: Artikel ini memecahkan masalah menggunakan JS untuk membuka halaman baru saat menekan tombol CTRL)
Dalam spesifikasi HTML5 yang disederhanakan, beberapa div dan/atau elemen tingkat blok lainnya diizinkan untuk dimasukkan dalam tag A. Sekarang, cukup bungkus elemen blok dengan tag <a>, Anda dapat memecahkan masalah yang awalnya Anda butuhkan untuk mendengarkan dengan javascript dan panggilan jendela. Lokasi untuk mencapai fungsi pengalihan halaman.
Namun, formulir pembungkus ini menggunakan tag <a> juga tidak berfungsi dengan baik - misalnya, ada beberapa tag <a> dalam elemen blok. Dalam hal ini, kami hanya ingin melompat ke alamat yang diberikan saat mengklik bagian lain selain <a> di induk.
Tentu saja, menggunakan pendengar sederhana seperti berikut ini juga dapat mencapai kebutuhan kita:
Salinan kode adalah sebagai berikut:
someelement.addeventListener ('klik', function (e) {
// Alamat URL apa pun baik -baik saja, atau Anda dapat menggunakan kode lain untuk menentukannya.
// Berikut adalah atribut DOM `data-src` dari elemen ini (atribut)
window.location = someElement.get ('data-url');
});
... Tapi ini terkadang memiliki pengalaman pengguna yang buruk. Saat Anda menahan tombol CTRL (Mac adalah tombol perintah) dan klik dengan mouse, itu akan membuka tautan di jendela (tab) yang sama. Mengetahui bahwa ada masalah ini, Anda harus memikirkan cara menyelesaikannya. Kita dapat mencapai ini dengan memodifikasi kode kecil. Luangkan waktu untuk memperbaiki pendengar Anda:
Salinan kode adalah sebagai berikut:
someelement.addeventListener ('klik', function (e) {
// Dapatkan URL
var url = someElement.get ('data-url');
// Tentukan apakah tombol CTRL telah ditekan
if (e.metakey || e.ctrlkey || e.button === 1) {
window.open (url);
} kalau tidak {
window.location = url;
}
});
Penulis asli telah menerapkan fungsi ini di situs web http://davidwalsh.name/, dan Anda harus mengingat ini saat menggunakan window.location untuk pengalihan halaman. Ini adalah peningkatan kode kecil, tetapi sangat penting untuk meningkatkan kegunaan!