เรียกใช้ฟังก์ชันจาวาสคริปต์เมื่อคลิกไฮเปอร์ลิงก์

ฉันกำลังสร้างไฮเปอร์ลิงก์แบบไดนามิกในโค้ด c # หลังไฟล์ ASP.NET ฉันต้องการเรียกใช้ฟังก์ชัน JavaScript เมื่อคลิกไคลเอนต์ ฉันจะทำสิ่งนี้ให้สำเร็จได้อย่างไร

นิ่งเฉยแทนที่จะเป็นtypical href="#"หรือhref="javascript:void"หรือhref="whatever"ฉันคิดว่านี่สมเหตุสมผลกว่ามาก:

var el = document.getElementById('foo');
el.onclick = showFoo;


function showFoo() {
  alert('I am foo!');
  return false;
}

<a href="no-javascript.html" title="Get some foo!" id="foo">Show me some foo</a>

หาก Javascript ล้มเหลวมีข้อเสนอแนะบางประการ นอกจากนี้พฤติกรรมที่เอาแน่เอานอนไม่ได้ (การกระโดดหน้าในกรณีhref="#"ไปที่หน้าเดียวกันในกรณีของhref="") จะถูกตัดออก

คำตอบที่ง่ายที่สุดคือ ...

<a href="javascript:alert('You clicked!')">My link</a>

หรือเพื่อตอบคำถามในการเรียกใช้ฟังก์ชันจาวาสคริปต์:

<script type="text/javascript">
function myFunction(myMessage) {
    alert(myMessage);
}
</script>

<a href="javascript:myFunction('You clicked!')">My link</a>

ด้วยพารามิเตอร์ onclick ...

<a href='http://www.google.com' onclick='myJavaScriptFunction();'>mylink</a>

คำตอบ JQuery เนื่องจาก JavaScript ถูกคิดค้นเพื่อพัฒนา JQuery ฉันจึงให้ตัวอย่างใน JQuery เพื่อทำสิ่งนี้:

<div class="menu">
    <a href="http://example.org">Example</a>
    <a href="http://foobar.com">Foobar.com</a>
</div>

<script>
jQuery( 'div.menu a' )
    .click(function() {
        do_the_click( this.href );
        return false;
    });

// play the funky music white boy
function do_the_click( url )
{
    alert( url );
}
</script>

ฉันชอบใช้เมธอด onclick มากกว่า href สำหรับการเชื่อมโยงหลายมิติของจาวาสคริปต์ และใช้การแจ้งเตือนเสมอเพื่อกำหนดมูลค่าที่คุณมี

<a href='#' onclick='jsFunction();alert('it works!');'>Link</a>

นอกจากนี้ยังสามารถใช้กับแท็กอินพุตเช่น

<input type='button' value='Submit' onclick='jsFunction();alert('it works!');'>

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

ใช้วิธีการที่คุณมี id เฉพาะสำหรับแต่ละองค์ประกอบ (หรือคลาสหากมีการทำงานร่วมกัน) จากนั้นใช้ Progressive Enhancement เพื่อเพิ่มตัวจัดการเหตุการณ์เช่น:

[c# example only probably not the way you're writing out your js]
Response.Write("<a href=\"/link/for/javascriptDisabled/Browsers.aspx\" id=\"uxAncMyLink\">My Link</a>");

[Javascript]  
document.getElementById('uxAncMyLink').onclick = function(e){

// do some stuff here

    return false;
    }

วิธีนี้จะไม่ทำให้โค้ดของคุณพังสำหรับผู้ใช้ที่ปิดใช้ JS และจะมีการแยกข้อกังวลที่ชัดเจน

หวังว่าเป็นประโยชน์

โดยทั่วไปฉันจะแนะนำให้ใช้ element.attachEvent (IE) หรือ element.addEventListener (เบราว์เซอร์อื่น ๆ ) ในการตั้งค่าเหตุการณ์ onclick โดยตรงเนื่องจากตัวจัดการเหตุการณ์ที่มีอยู่จะแทนที่ตัวจัดการเหตุการณ์ที่มีอยู่สำหรับองค์ประกอบนั้น

attachEvent / addEventListening อนุญาตให้สร้างตัวจัดการเหตุการณ์หลายตัว

ใช้แอตทริบิวต์onclick HTML

onclickจัดการเหตุการณ์จับเหตุการณ์คลิกจากปุ่มเมาส์ของผู้ใช้ในองค์ประกอบที่เป็นของ onclickแอตทริบิวต์ถูกนำไปใช้ การดำเนินการนี้มักจะส่งผลให้มีการเรียกใช้วิธีสคริปต์เช่นฟังก์ชัน JavaScript [... ]

หากคุณไม่รอให้หน้าโหลดคุณจะไม่สามารถเลือกองค์ประกอบตาม id ได้ วิธีนี้ควรใช้ได้กับทุกคนที่มีปัญหาในการเรียกใช้โค้ด

<script type="text/javascript">
window.onload = function() {
    document.getElementById("delete").onclick = function() {myFunction()};

    function myFunction() {
        //your code goes here
        alert('Alert message here');
    }
};
</script>

<a href='#' id='delete'>Delete Document</a>