การยกเลิกการทำงานเริ่มต้นใน JavaScript

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

การยกเลิกการทำงานเริ่มต้นทำได้ โดยใช้ออบเจ็กต์ Event สำหรับเรื่องนี้ มันมีเมธอดพิเศษ preventDefault() ซึ่งควรเรียกที่ใดก็ได้ในตัวจัดการเหตุการณ์

ลองทดลองปฏิบัติ สมมติว่าเรามีลิงก์แบบนี้:

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

มาทำให้เมื่อคลิกที่ลิงก์ ไม่เกิดการเปลี่ยนไปยังหน้าอื่น:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function(event) {
	event.preventDefault();
	console.log('คุณไม่สามารถไปที่ลิงก์นี้ได้!');
});

มีลิงก์หลายอัน จัดการให้เมื่อคลิก ที่ลิงก์ใด ให้เพิ่ม href ของมันลงไปท้ายลิงก์นั้น และไม่เกิดการไปยังลิงก์

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