gọi hàm javascript khi nhấp vào siêu liên kết

Tôi đang tạo động một siêu liên kết trong mã c # đằng sau tệp ASP.NET. Tôi cần gọi một hàm JavaScript khi khách hàng nhấp chuột. làm thế nào để tôi hoàn thành điều này?

Vẫn gọn gàng hơn, thay vì typical href="#"hoặc href="javascript:void"hoặc href="whatever", tôi nghĩ điều này có ý nghĩa hơn nhiều:

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>

Nếu Javascript không thành công, có một số phản hồi. Hơn nữa, hành vi thất thường (nhảy trang trong trường hợp href="#", truy cập cùng một trang trong trường hợp href="") bị loại bỏ.

Câu trả lời đơn giản nhất là ...

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

Hoặc để trả lời câu hỏi về cách gọi hàm javascript:

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

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

Với tham số onclick ...

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

Câu trả lời JQuery. Vì JavaScript được phát minh để phát triển JQuery, tôi sẽ cung cấp cho bạn một ví dụ trong JQuery làm điều này:

<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>

Tôi thích sử dụng phương pháp onclick hơn là href cho các siêu liên kết javascript. Và luôn sử dụng cảnh báo để xác định giá trị bạn có.

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

Nó cũng có thể được sử dụng trên các thẻ đầu vào, ví dụ.

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

Lý tưởng nhất là tôi sẽ tránh hoàn toàn tạo ra các liên kết trong mã của bạn vì mã của bạn sẽ cần biên dịch lại mỗi khi bạn muốn thực hiện thay đổi đối với 'đánh dấu' của từng liên kết đó. Nếu bạn phải làm điều đó, tôi sẽ không nhúng các 'lệnh gọi' javascript của bạn vào bên trong HTML của bạn, đó hoàn toàn là một phương pháp không tốt, đánh dấu của bạn phải mô tả tài liệu của bạn không phải những gì nó làm, đó là công việc của javascript.

Sử dụng cách tiếp cận mà bạn có một id cụ thể cho từng phần tử (hoặc lớp nếu chức năng chung của nó) và sau đó sử dụng Tính năng nâng cao lũy tiến để thêm (các) trình xử lý sự kiện, chẳng hạn như:

[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;
    }

Bằng cách đó, mã của bạn sẽ không bị hỏng đối với những người dùng bị vô hiệu hóa JS và nó sẽ có sự phân biệt rõ ràng về các mối quan tâm.

Hy vọng đó là sử dụng.

Nói chung, tôi khuyên bạn nên sử dụng element.attachEvent (IE) hoặc element.addEventListener (các trình duyệt khác) để thiết lập trực tiếp sự kiện onclick vì sau này sẽ thay thế bất kỳ trình xử lý sự kiện hiện có nào cho phần tử đó.

AttachEvent / addEventListening cho phép tạo nhiều trình xử lý sự kiện.

Sử dụng onclickthuộc tính HTML .

Trình onclickxử lý sự kiện nắm bắt một sự kiện nhấp chuột từ nút chuột của người dùng trên phần tử mà onclickthuộc tính được áp dụng. Hành động này thường dẫn đến một lệnh gọi đến một phương thức tập lệnh, chẳng hạn như hàm JavaScript [...]

Nếu bạn không đợi trang được tải, bạn sẽ không thể chọn phần tử theo id. Giải pháp này sẽ hoạt động đối với bất kỳ ai gặp sự cố khi mã thực thi

<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>