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

ลองมาวิเคราะห์ข้อผิดพลาดที่เกี่ยวข้องกับ การคลิกลิงก์ที่ไม่คาดคิดกัน สมมติตัวอย่างเช่นให้มี ลิงก์ดังต่อไปนี้:

<a href="">link</a>

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

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

ผูกตัวจัดการการคลิก เข้ากับลิงก์ของเรา:

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

และนี่คือจุดที่เราพบกับเรื่องน่าประหลาดใจ รหัสถูกเขียน อย่างถูกต้อง อย่างไรก็ตาม เอาต์พุตในคอนโซลไม่ปรากฏขึ้น ปัญหาคือ เมื่อคลิกแล้วจะเกิดการเปลี่ยนหน้า ตามลิงก์ เนื่องจากในแอตทริบิวต์ href ไม่ได้ระบุอะไร ไว้ ดังนั้นลิงก์จึงเพียงชี้ไปที่ หน้าปัจจุบัน

นี่หมายความว่าการคลิกลิงก์ทำให้เกิด การโหลดหน้าใหม่ นั่นคือข้อมูลของเรา ถูกแสดงในคอนโซล จากนั้นหน้าเว็บจะถูกโหลดใหม่ และคอนโซลก็ว่างเปล่า

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

ลองมาดูกันว่าเราสามารถแก้ไข ปัญหานี้ได้อย่างไร

วิธีแก้ไขแรก

ใน href ของลิงก์ ควรใส่ เครื่องหมายแฮช (#) สิ่งนี้จะทำให้ ลิงก์ชี้ไปยังตำแหน่งที่ระบุ ในหน้าปัจจุบัน และเมื่อคลิก บนลิงก์ จะไม่มีการโหลดหน้าใหม่ ลองทำดู:

<a href="#">link</a>

วิธีแก้ไขที่สอง

วิธีที่ก้าวหน้ากว่าคือการยกเลิกการดำเนินการ เริ่มต้นโดยใช้เมธอด preventDefault:

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