ลิงก์ JavaScript: ดีกว่า "#" หรือ "javascript:void(0)"?

javascript:void(0) ดีกว่า # เพราะเร็วกว่า ไม่ทำให้หน้าจอกระโดด และไม่เปลี่ยน URL history

ตัวอย่างจากบทความ

<!DOCTYPE html>
<html>
  <head>
    <title>Understanding JavaScript void(0)</title>
  </head>
  <body>
    <a href="javascript:void(0);" ondblclick="alert('Click it twice!')">
      คลิกฉันไม่ใช่ครั้งเดียว แต่สองครั้ง</a>
  </body>
</html>

เปรียบเทียบ # vs javascript:void(0)

ทำไม void(0) จึงดีกว่า

• void ประเมินนิพจน์และคืน undefined เสมอ
• void(0) เป็นรูปแบบมาตรฐานที่สั้นที่สุดสำหรับได้ undefined
• ไม่กระตุ้น navigation ใดๆ

แนวทางปฏิบัติที่ดีที่สุด (Modern Best Practice)

1. ใช้ <button> แทน <a> (แนะนำมากที่สุด)

<!-- สำหรับ Action ไม่ใช่ Navigation -->
<button type="button" onclick="doSomething()">Click me</button>

<style>
  button { background: none; border: none; color: blue; text-decoration: underline; cursor: pointer; }
</style>

2. ใช้ event.preventDefault()

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

<script>
  document.getElementById('myLink').addEventListener('click', function(e) {
    e.preventDefault(); // ยกเลิกการ navigate
    doSomething();
  });
</script>

3. ใช้ href="javascript:void(0)" (ถ้าบังคับต้องใช้ <a>)

<a href="javascript:void(0)" onclick="doSomething()">Action</a>

Accessibility Note

• <button> มี keyboard support, screen reader support มากกว่า
• <a href="javascript:void(0)"> ไม่ได้เป็น link จริง → ควรเพิ่ม role="button"
• หลีกเลี่ยง href="#" เพราะ screen reader อ่านว่า "link" แต่กดแล้วไม่ไปไหน

สรุป

1. Button element - สำหรับ Action (Best)
2. a + preventDefault - ถ้าต้องการ link style
3. javascript:void(0) - Legacy fallback
4. # - หลีกเลี่ยง (ทำให้ scroll top, pollute history)