HTML anchor tag กับ Javascript onclick event

86

ในการใช้ Google ฉันพบว่าพวกเขาใช้เหตุการณ์ onclick ในแท็กจุดยึด

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

<a href='more.php' onclick='show_more_menu()'>More >>></a>

มันมักจะไปที่ 'more.php' โดยไม่เริ่มshow_more_menu()ทำงาน แต่ฉันได้แสดงเมนูในหน้านั้นเอง จะทำเหมือนgoogle ได้อย่างไร?

— smartkid
แหล่งที่มา

120

หากฟังก์ชัน onclick ของคุณส่งกลับเท็จพฤติกรรมเริ่มต้นของเบราว์เซอร์จะถูกยกเลิก ดังต่อไปนี้:

<a href='http://www.google.com' onclick='return check()'>check</a>

<script type='text/javascript'>

function check()
{
    return false;
}

</script>

ไม่ว่าจะด้วยวิธีใด Google จะทำหรือไม่ก็ไม่มีความสำคัญมากนัก การผูกฟังก์ชั่น onclick ภายใน javascript จะสะอาดกว่า - วิธีนี้จะทำให้คุณแยก HTML ออกจากโค้ดอื่น ๆ

— TJHeuvel
แหล่งที่มา

3

1. เพื่อให้แน่ใจยิ่งขึ้นให้ใช้ # ใน href = "#" และทำสิ่งที่จำเป็นภายในจาวาสคริปต์ สามารถคลิกลิงก์นั้นด้วย # href ได้อย่างปลอดภัย หน้านี้ปล่อย / โหลด URL ซ้ำ

— Bimal Poudel

5

ปฏิบัติตามคำแนะนำข้างต้นด้วยความระมัดระวังเนื่องจากกฎ HTML5 ระบุไว้อย่างชัดเจนว่าhref="#"ควรจะไปที่ด้านบนสุดของหน้า คุณสามารถเพิ่มhrefAttibute โดยไม่มีเนื้อหาและรับพฤติกรรมการคลิกได้ การกำหนด#เป็น url สำหรับเพจจริง (แทนที่จะเป็นแอพที่มีความสูง 100% แบบหน้าเดียว) เป็นความคิดที่ไม่ดี

— Mike 'Pomax' Kamermans

เพียงแค่บันทึกไว้ในลักษณะเดียวกับที่คุณผูกคลาส CSS เข้ากับองค์ประกอบจากนั้นระบุลักษณะโดยละเอียดในไฟล์ CSS ที่แยกจากกันการผูกฟังก์ชันตัวจัดการเหตุการณ์แบบอินไลน์กับองค์ประกอบนั้นเป็นสิ่งที่ดีอย่างยิ่งจากนั้นระบุการใช้งานโดยละเอียดของ ฟังก์ชันนั้นในไฟล์ JS แยกต่างหาก ไฟล์ HTML ของคุณคือที่ที่คุณประกาศโครงสร้างลักษณะและลักษณะการทำงานของหน้าเว็บของคุณ การใช้งานโดยละเอียดอยู่ที่อื่น นั่นคือประเภทของการแยกที่คุณต้องการจริงๆ

— Sarsaparilla

54

คุณสามารถลองใช้ตัวเลือกด้านล่าง:

<a href="javascript:show_more_menu();">More >>></a>

— ดวงอาทิตย์ 2
แหล่งที่มา

1

คำเตือน: หากฟังก์ชันส่งคืนค่าที่ชัดเจน (เช่น: return null;แต่ไม่ใช่return;) สิ่งนี้จะส่งผลที่ไม่ได้ตั้งใจในเบราว์เซอร์บางตัวเช่น FireFox หน้าจะมีเนื้อหาทั้งหมดแทนที่ด้วยค่ากลับมาในรูปแบบสตริง (เช่น: [object Object])

— rannmann

45

จากสิ่งที่ฉันเข้าใจว่าคุณไม่ต้องการเปลี่ยนเส้นทางเมื่อคลิกลิงก์ คุณทำได้ :

<a href='javascript:;' onclick='show_more_menu();'>More ></a>

— อดิตยามโนฮาร์
แหล่งที่มา

3

สิ่งนี้มีประโยชน์เมื่อคุณไม่ต้องการให้ href ชี้ไปที่ใดก็ได้

— kbpontius

มันเจ๋งและใช้งานได้ แต่ jquery แสดงข้อผิดพลาด "Error: Syntax error, unrecognized expression: javascript :;"

— TheOddCoder

ฉันใช้ jQuery เวอร์ชัน 1.10.2 และฉันไม่ได้รับข้อผิดพลาดทางไวยากรณ์ที่ @TheOddCoder พบ

— Mike Finch

1

ใช้รหัสต่อไปนี้เพื่อแสดงเมนูแทนไปที่ที่อยู่ href

function show_more_menu(e) {
  if( !confirm(`Go to ${e.target.href} ?`) ) e.preventDefault();
}

<a href='more.php' onclick="show_more_menu(event)"> More >>> </a>

ขยายข้อมูลโค้ด

— Kamil Kiełczewski
แหล่งที่มา