在超链接单击时调用 javascript 函数

Question

我在 ASP.NET 的 c# 代码隐藏文件中动态创建超链接。我需要在客户端单击时调用 JavaScript 函数。我该如何做到这一点？

Answer 1

使用 onclick 参数...

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

Answer 2

使用onclick HTML attribute。

onclick 事件处理程序捕获一个 用户鼠标的点击事件 元素上的按钮 onclick 属性已应用。这 动作通常会导致调用 脚本方法，例如 JavaScript 功能 [...]

Answer 3

更简洁，而不是 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="" 的访问同一页面）。

Answer 4

理想情况下，我会避免在您的代码中完全生成链接，因为每次您想要更改每个链接的“标记”时，您的代码都需要重新编译。如果您必须这样做，我不会将您的 javascript“调用”嵌入到您的 HTML 中，这完全是一种不好的做法，您的标记应该描述您的文档而不是它的作用，这就是您的 javascript 的工作。

使用一种方法，让每个元素（或类，如果它的通用功能）都有一个特定的 id，然后使用渐进增强来添加事件处理程序，例如：

[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 的用户而中断，并且会明确区分关注点。

希望有用。

Answer 5

我通常建议使用 element.attachEvent (IE) 或 element.addEventListener（其他浏览器）而不是直接设置 onclick 事件，因为后者将替换该元素的任何现有事件处理程序。

attachEvent / addEventListening 允许创建多个事件处理程序。

Answer 6

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>

Answer 7

我更喜欢使用 onclick 方法而不是 javascript 超链接的 href。并且始终使用警报来确定您拥有什么价值。

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

它也可以用于输入标签，例如。

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

Answer 8

最简单的答案是......

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

或者回答调用javascript函数的问题：

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

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

Answer 9

如果您不等待页面加载，您将无法通过 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>