(หมายเหตุของนักแปล: บทความนี้แก้ปัญหาการใช้ JS เพื่อเปิดหน้าใหม่เมื่อกดปุ่ม CTRL)
ในข้อกำหนด HTML5 ที่ง่ายขึ้นหลาย Divs และ/หรือองค์ประกอบระดับบล็อกอื่น ๆ จะได้รับอนุญาตให้รวมอยู่ในแท็ก A ตอนนี้เพียงแค่ห่อองค์ประกอบบล็อกด้วยแท็ก <a> คุณสามารถแก้ปัญหาที่คุณจำเป็นต้องฟังด้วย JavaScript และ Window.location เพื่อให้ได้ฟังก์ชันการเปลี่ยนเส้นทางหน้า
อย่างไรก็ตามแบบฟอร์มการห่อนี้โดยใช้แท็ก <a> ก็ใช้งานไม่ได้ - ตัวอย่างเช่นมีแท็ก <a> บางอย่างในองค์ประกอบบล็อก ในกรณีนี้เราต้องการข้ามไปยังที่อยู่ที่กำหนดเมื่อคลิกที่ส่วนอื่น ๆ นอกเหนือจาก <a> ในผู้ปกครอง
แน่นอนว่าการใช้ผู้ฟังอย่างง่าย ๆ ดังต่อไปนี้สามารถบรรลุความต้องการของเราได้:
การคัดลอกรหัสมีดังนี้:
onelement.addeventListener ('คลิก', ฟังก์ชั่น (e) {
// ที่อยู่ URL ใด ๆ ก็โอเคหรือคุณสามารถใช้รหัสอื่นเพื่อระบุ
// นี่คือแอตทริบิวต์ `data-src` dom ขององค์ประกอบนี้ (แอตทริบิวต์)
window.location = someElement.get ('data-url');
-
... แต่บางครั้งก็มีประสบการณ์การใช้งานที่ไม่ดี เมื่อคุณกดปุ่ม CTRL (MAC เป็นคีย์คำสั่ง) และคลิกด้วยเมาส์มันจะเปิดลิงก์ในหน้าต่าง (แท็บ) เดียวกัน เมื่อรู้ว่ามีปัญหานี้คุณต้องคิดว่าจะแก้ปัญหาได้อย่างไร เราสามารถทำได้โดยการแก้ไขรหัสเล็กน้อย ใช้เวลาในการแก้ไขผู้ฟังของคุณ:
การคัดลอกรหัสมีดังนี้:
onelement.addeventListener ('คลิก', ฟังก์ชั่น (e) {
// รับ URL
var url = someElement.get ('data-url');
// ตรวจสอบว่ากดปุ่ม CTRL หรือไม่
ถ้า (E.Metakey || E.Ctrlkey || e.button === 1) {
window.open (url);
} อื่น {
window.location = url;
-
-
ผู้เขียนต้นฉบับได้ใช้ฟังก์ชั่นนี้บนเว็บไซต์ http://davidwalsh.name/ และคุณควรจำสิ่งนี้เมื่อใช้ Window.location สำหรับการเปลี่ยนเส้นทางหน้า นี่คือการปรับปรุงรหัสเล็ก ๆ แต่มันสำคัญมากที่จะปรับปรุงการใช้งาน!