JScript Katana

อะไรคือ “javascript:void(0)”? คู่มือฉบับสมบูรณ์เกี่ยวกับความหมาย การใช้งาน และแนวปฏิบัติที่ดีที่สุด

ฟังก์ชันอรรถประโยชน์อื่น ๆ
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. บทนำ – “javascript:void(0)” คืออะไร?

เมื่อเรียนรู้ JavaScript คุณอาจเจอสัญลักษณ์ “javascript:void(0)” ในโค้ด บางครั้งอาจดูสับสนในตอนแรก แต่จริง ๆ แล้วมันเป็นเทคนิคที่มีประโยชน์สำหรับการควบคุมพฤติกรรมของหน้าเว็บและการจัดการเหตุการณ์
บทความนี้จะอธิบายความหมาย จุดประสงค์ และการใช้งานของ “javascript:void(0)” อย่างชัดเจน รวมถึงข้อควรระวังสำคัญและทางเลือกสมัยใหม่

1-1. คำถามทั่วไป: “javascript:void(0)” หมายความว่าอะไร?

“javascript:void(0)” เป็นสัญลักษณ์ที่ใช้เพื่อป้องกันพฤติกรรมเริ่มต้นของลิงก์หรือปุ่มและให้ทำงาน JavaScript ที่กำหนดเองแทน
โดยปกติ แท็ก HTML <a> จะนำทางไปยังหน้าเป้าหมายเมื่อคลิก แต่เมื่อคุณต้องการให้ลิงก์ทำหน้าที่เหมือนปุ่มโดยไม่ต้องนำทางไปที่ไหน “javascript:void(0)” จึงเป็นประโยชน์
ตัวอย่าง:

<a href="javascript:void(0);">Click</a>

การคลิกลิงก์นี้จะไม่ทำอะไรเลย คุณสามารถผูกการจัดการเหตุการณ์ JavaScript ของคุณเองแทนได้

1-2. ความท้าทายของผู้อ่านและวัตถุประสงค์ของบทความ

เมื่อเพิ่มการจัดการเหตุการณ์แบบกำหนดเองให้กับหน้าเว็บ มีหลายวิธีในการควบคุมลิงก์และปุ่ม อย่างไรก็ตาม “javascript:void(0)” อาจทำให้ผู้เริ่มต้นสับสนและอาจส่งผลต่อ SEO หรือการเข้าถึง (accessibility) หากใช้ไม่ถูกต้อง
บทความนี้ครอบคลุมหัวข้อต่อไปนี้เพื่อให้คุณเข้าใจและใช้ได้อย่างถูกต้อง:

  1. แนวคิดพื้นฐานและการนำ “javascript:void(0)” ไปใช้
  2. ข้อควรระวังและข้อเสีย
  3. ทางเลือกที่ปลอดภัยและทันสมัยกว่า

ด้วยความรู้นี้ คุณจะสามารถสร้างเว็บแอปพลิเคชันที่ทันสมัยและมีประสิทธิภาพมากขึ้น

2. แนวคิดพื้นฐานของ “javascript:void(0)”

“javascript:void(0)” เป็นประเภทของนิพจน์ JavaScript ที่ใช้หลัก ๆ เพื่อปิดการทำงานเริ่มต้นของลิงก์หรือปุ่ม ส่วนนี้จะอธิบายว่าโอเปอเรเตอร์ void ทำงานอย่างไรและ “void(0)” มีความหมายอย่างไร

2-1. ความหมายของโอเปอเรเตอร์ “void”

ใน JavaScript, โอเปอเรเตอร์ “void” จะคืนค่าเป็นไม่มีค่า (undefined)
โดยปกติ นิพจน์ JavaScript จะคืนค่าบางอย่าง แต่ “void” จะบังคับให้ผลลัพธ์เป็น undefined ใช้เพื่อเพิกเฉยผลลัพธ์ของการประเมินขณะทำผลข้างเคียง
ตัวอย่างพื้นฐาน:

console.log(void(0)); // Output: undefined

นี่แสดงให้เห็นว่า void(0) คืนค่าเป็น undefined

2-2. “void(0)” แทนอะไร

“void(0)” แทน “ทำอะไรไม่ได้” (do nothing) มันประเมินเป็น undefined ทำให้ป้องกันการนำทางของหน้าในขณะที่ยังคงให้คุณกำหนดพฤติกรรมคลิกของคุณเองได้
ตัวอย่าง:

<a href="javascript:void(0);" onclick="alert('Clicked!');">Click</a>

ลิงก์นี้จะไม่นำทางแต่จะเรียกแสดงการแจ้งเตือน

2-3. ทำใช้ “javascript:void(0)”

เหตุผลหลักได้แก่:

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

3. ตัวอย่างการใช้งานและการนำไปปฏิบัติ

ส่วนนี้อธิบายตัวอย่างการใช้งานจริงของ “javascript:void(0)” ตั้งแต่โค้ดพื้นฐานจนถึงสถานการณ์ที่นำไปใช้จริง

3-1. ตัวอย่างโค้ดพื้นฐาน

<a href="javascript:void(0);">Link</a>

ลิงก์นี้จะไม่ทำอะไรเมื่อคลิก

3-2. การปรับแต่งเหตุการณ์คลิก

ตัวอย่าง 1: แสดง Alert

<a href="javascript:void(0);" onclick="alert('Clicked!');">Click</a>

3-3. ตัวอย่างตามสถานการณ์

การเปิด Modal Window
HTML:

<a href="javascript:void(0);" id="openModal">Open Modal</a>
<div id="modal" style="display:none; background:rgba(0,0,0,0.5); padding:20px;">
  <p>This is a modal window.</p>
  <button id="closeModal">Close</button>
</div>

JavaScript:

document.getElementById('openModal').addEventListener('click', function() {
  document.getElementById('modal').style.display = 'block';
});
document.getElementById('closeModal').addEventListener('click', function() {
  document.getElementById('modal').style.display = 'none';
});

4. ข้อดีและข้อเสีย – ควรใช้หรือไม่?

“javascript:void(0)” ถูกใช้อย่างแพร่หลาย แต่มีข้อเสียบางประการ ส่วนนี้จะอธิบายทั้งข้อดีและข้อควรระวัง

4-1. ข้อดี

  1. ป้องกันการนำทางเริ่มต้น
  2. ไวยากรณ์ที่เรียบง่ายและเข้าใจง่าย
  3. มีประโยชน์สำหรับลิงก์ชั่วคราว

4-2. ข้อเสีย

  1. ผลกระทบต่อ SEO เครื่องมือค้นหาไม่สามารถคลานเนื้อหา href ได้
  2. ปัญหาการเข้าถึง ตัวอ่านหน้าจอและการนำทางด้วยคีย์บอร์ดอาจทำงานไม่ถูกต้อง

4-3. เมื่อใดควรใช้และเมื่อใดควรหลีกเลี่ยง

กรณีที่แนะนำให้ใช้:

  • ทำงานเหมือนปุ่มแต่ implement เป็นลิงก์
  • ลิงก์ที่ตายชั่วคราว

หลีกเลี่ยงเมื่อ:

  • คุณต้องการลิงก์ที่เป็นมิตรกับ SEO
  • การเข้าถึงมีความสำคัญ

5. ทางเลือกและแนวปฏิบัติที่ดีที่สุดสมัยใหม่

แม้ว่า “javascript:void(0)” จะสะดวก แต่ยังมีแนวทางที่ทันสมัยและปลอดภัยกว่าอยู่

5-1. การใช้ event.preventDefault()

แนวคิด เมธอดนี้ยกเลิกพฤติกรรมเริ่มต้น เช่น การนำทางลิงก์หรือการส่งฟอร์ม ตัวอย่าง HTML:

<a href="#" id="customLink">Link</a>

JavaScript:

document.getElementById('customLink').addEventListener('click', function(event) {
  event.preventDefault();
  alert('Custom event executed!');
});

5-2. การใช้แท็ก <button>

HTML5 แนะนำให้ใช้ element <button> เมื่อ implement พฤติกรรมเหมือนปุ่ม HTML:

<button id="actionButton">Click</button>

JavaScript:

document.getElementById('actionButton').addEventListener('click', function() {
  alert('Button clicked!');
});

5-3. ตัวอย่างที่เป็นมิตรกับการเข้าถึงและ SEO

HTML:

<a href="#" id="accessibleLink" tabindex="0">Click</a>

JavaScript:

document.getElementById('accessibleLink').addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    alert('Executed with Enter key!');
  }
});

6. ตัวอย่างโค้ดตามกรณีการใช้งาน

6-1. การสร้างเมนูนำทาง

HTML:

<a href="javascript:void(0);" id="menuToggle">Menu</a>
<ul id="menu" style="display: none;">
  <li><a href="#">Home</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>

JavaScript:

document.getElementById('menuToggle').addEventListener('click', function() {
  const menu = document.getElementById('menu');
  menu.style.display = (menu.style.display === 'none') ? 'block' : 'none';
});

6-2. ตัวกระตุ้นหน้าต่าง Modal

HTML:

<a href="javascript:void(0);" id="openModal">Open Modal</a>
<div id="modal" style="display:none; background:rgba(0,0,0,0.5); padding:20px;">
  <p>This is a modal window.</p>
  <button id="closeModal">Close</button>
</div>

JavaScript:

const modal = document.getElementById('modal');
document.getElementById('openModal').addEventListener('click', function() {
  modal.style.display = 'block';
});
document.getElementById('closeModal').addEventListener('click', function() {
  modal.style.display = 'none';
});

7. สรุป – การใช้ “javascript:void(0)” และตัวเลือกในอนาคต

7-1. ประเด็นสำคัญ

  1. แนวคิดพื้นฐาน : ปิดการใช้งานพฤติกรรมลิงก์เริ่มต้นและรันลอจิกที่กำหนดเอง
  2. ข้อควรระวังและทางเลือก : ใช้ event.preventDefault() หรือ <button> สำหรับ SEO และการเข้าถึง
  3. ตัวอย่างปฏิบัติ : เมนูนำทาง ตัวกระตุ้น modal และอื่นๆ

7-2. คำแนะนำสำหรับการพัฒนาสมัยใหม่

แม้ว่า “javascript:void(0)” ยังคงถูกใช้ แต่การพัฒนาสมัยใหม่ให้ความสำคัญกับ SEO และการใช้งาน แนวทางที่แนะนำ:

  • ใช้ “javascript:void(0)” สำหรับโปรโตไทป์ด่วนหรือโครงการขนาดเล็กมาก
  • ใช้ event.preventDefault() หรือ <button> ในสภาพแวดล้อมการผลิต

7-3. ความคิดสุดท้าย

โดยใช้เทคนิคที่แนะนำในที่นี้ ให้ implement การเขียนโค้ดที่พิจารณาทั้ง SEO และประสบการณ์ผู้ใช้

広告