ข้อผิดพลาดการห้ามลิงก์ใน JavaScript

สมมติว่าเรามีลิงก์:

<a href="">ลิงก์</a>

รับลิงก์ของเราไว้ในตัวแปร:

let link = document.querySelector('a');

แนบตัวจัดการเหตุการณ์คลิกให้กับลิงก์ของเรา ยกเลิกการนำทางไปยังลิงก์ เพื่อหลีกเลี่ยงการรีโหลด หน้า:

link.addEventListener('click', function(event) {
	console.log(this.textContent);
	event.preventDefault();
});

ดูเหมือนว่าเราจะป้องกันตัวเองได้อย่างสมบูรณ์ จากพฤติกรรมที่ไม่คาดคิด ในความเป็นจริง มันไม่เป็นเช่นนั้น สาเหตุคือ เมื่อเกิด ข้อผิดพลาดทางไวยากรณ์ใน JavaScript โค้ดจะไม่ถูกดำเนินการ การบล็อกลิงก์จะไม่ทำงาน และจะเกิด การนำทางไปยังลิงก์นั้น

ในกรณีนี้ เราจะไม่เห็นผลลัพธ์ ของการดำเนินการโค้ด หรือข้อผิดพลาดในคอนโซล เนื่องจาก หน้าจะถูกโหลดใหม่ มาทำให้เกิดข้อผิดพลาดในโค้ด โดยเจตนา และทดลองดู:

link.addEventListener('click', function(event) {
	thiss.textContent = 'ข้อความ'; // ข้อผิดพลาดทางไวยากรณ์
	event.preventDefault();
});

ปัญหานี้มีลักษณะเฉพาะ: หากมองไปที่คอนโซลในขณะที่คลิก บนลิงก์ เราจะเห็นข้อผิดพลาดสีแดง ในคอนโซลชั่วครู่ ซึ่งเกือบจะทันที หายไป

แน่นอนว่าเราอ่านข้อความข้อผิดพลาด ไม่ทัน ซึ่งทำให้การค้นหา ทำได้ยากขึ้น อย่างไรก็ตาม มีเทคนิคที่ฉลาด จำเป็นต้อง ใส่เครื่องหมาย # ลงใน href ของลิงก์ ในกรณีนี้จะไม่เกิดการนำทางไปยังลิงก์ และเราจะเห็นข้อผิดพลาด ที่ปรากฏในคอนโซล:

<a href="#">ลิงก์</a>