JavaScript melaksanakan menekan kekunci Ctrl untuk membuka kemahiran page_javascript baharu

(Nota Penterjemah: Artikel ini menyelesaikan masalah menggunakan JS untuk membuka halaman baharu apabila menekan kekunci Ctrl)

Dalam spesifikasi HTML5 yang dipermudahkan, berbilang DIV dan/atau elemen peringkat blok lain dibenarkan untuk disertakan dalam teg A Sekarang selagi elemen blok dibalut dengan teg masalah menggunakan JavaScript untuk mendengar dan Call window.location untuk melaksanakan fungsi lompat halaman (ubah hala).

Tetapi terdapat situasi di mana bentuk pembungkusan menggunakan tag tidak berfungsi dengan baik - contohnya, terdapat beberapa teg dalam elemen blok tertentu (blok), dalam kes ini, kami hanya mahu Lompat ke alamat yang diberikan hanya apabila mengklik bahagian lain ibu bapa kecuali .

Sudah tentu, keperluan kita juga boleh dicapai menggunakan pendengar mudah seperti berikut:

Salin kod Kod adalah seperti berikut:

someElement.addEventListener('klik', fungsi(e) {
// Alamat URL boleh apa-apa sahaja, atau anda juga boleh menggunakan kod lain untuk menentukan.
// Atribut DOM `data-src` bagi elemen digunakan di sini (atribut)
​ window.location = someElement.get('data-url');
});

…Tetapi ini kadangkala mempunyai pengalaman pengguna yang buruk Apabila anda menahan kekunci CTRL (kekunci COMMAND pada Mac) dan mengklik dengan tetikus, ia akan membuka pautan dalam tetingkap (tab) yang sama. Mengetahui bahawa terdapat masalah ini, anda mesti memikirkan cara untuk menyelesaikannya

Salin kod Kod adalah seperti berikut:

someElement.addEventListener('klik', fungsi(e) {
// Dapatkan URL
var url = someElement.get('data-url');
// Tentukan sama ada kekunci CTRL ditekan
If(e.metaKey || e.ctrlKey || e.button === 1) {
          window.open(url);
} lain {
          window.location = url;
}
});

Pengarang asal telah melaksanakan fungsi ini pada tapak web http://davidwalsh.name/ Anda juga harus ingat ini apabila menggunakan window.location untuk pengalihan halaman. Ini adalah peningkatan kod kecil, tetapi peningkatan yang sangat penting dalam kebolehgunaan!