ลิงก์สมอ HTML - href และ onclick ทั้งสอง?

ฉันต้องการสร้างจุดยึดแท็กที่เรียกใช้ JavaScript บางส่วนจากนั้นดำเนินการต่อไปทุกที่ที่hrefใช้ การเรียกใช้ฟังก์ชันที่เรียกใช้งาน JavaScript ของฉันแล้วตั้งค่าwindow.locationหรือtop.locationไปยังhrefตำแหน่งนั้นไม่ได้ผลสำหรับฉัน

ลองนึกภาพว่าฉันมีองค์ประกอบที่มี id "Foo" อยู่บนหน้า ฉันต้องการเขียนจุดยึดที่คล้ายกับ:

<a href="#Foo" onclick="runMyFunction(); return false;">Do it!</a>

เมื่อคลิกสิ่งนี้ฉันต้องการเรียกใช้ runMyFunction จากนั้นข้ามหน้าไปที่#Foo(ไม่ทำให้เกิดการโหลดซ้ำ - การใช้top.locationจะทำให้โหลดหน้าซ้ำ)

ข้อเสนอแนะ? ฉันยินดีที่จะใช้ jQuery หากสามารถช่วยได้ที่นี่ ...

เพียงแค่return trueแทน?

ค่าส่งคืนจากonClickโค้ดคือสิ่งที่กำหนดว่าการดำเนินการคลิกโดยธรรมชาติของลิงก์ได้รับการประมวลผลหรือไม่ - การส่งคืนfalseหมายความว่าไม่ได้รับการประมวลผล แต่ถ้าคุณกลับมาtrueเบราว์เซอร์จะดำเนินการประมวลผลหลังจากฟังก์ชันของคุณกลับมาและไปที่เหมาะสม สมอ.

<a href="#Foo" onclick="return runMyFunction();">Do it!</a>

และ

function runMyFunction() {
  //code
  return true;
}

ด้วยวิธีนี้คุณจะเรียกใช้ฟังก์ชัน youf และคุณจะไปตามลิงค์และคุณจะไปตามลิงค์หลังจากเรียกใช้ฟังก์ชันของคุณสำเร็จแล้ว

หากลิงก์ควรเปลี่ยนตำแหน่งหากการเรียกใช้ฟังก์ชันสำเร็จให้ทำonclick="return runMyFunction();"และในฟังก์ชันคุณจะส่งคืนจริงหรือเท็จ

หากคุณเพียงแค่ต้องการเรียกใช้ฟังก์ชันจากนั้นปล่อยให้แท็กจุดยึดทำงานเพียงแค่ลบreturn falseคำสั่งนั้นออก

โปรดทราบว่าคุณควรใช้ตัวจัดการเหตุการณ์แทนเนื่องจาก JS แบบอินไลน์ไม่ใช่วิธีที่ดีที่สุดในการทำสิ่งต่างๆ

เมื่อสร้างโครงสร้าง HTML ใหม่ทั้งหมดคุณสามารถใช้สิ่งนี้ได้

//Jquery Code
$('a#link_1').click(function(e){
  e . preventDefault () ;
  var a = e . target ;
  window . open ( '_top' , a . getAttribute ('href') ) ;
});

//Normal Code
element = document . getElementById ( 'link_1' ) ;
element . onClick = function (e) {
  e . preventDefault () ;
  
  window . open ( '_top' , element . getAttribute ('href') ) ;
} ;

<a href="#Foo" id="link_1">Do it!</a>