在超链接上调用javascript函数点击

我在ASP.NET文件后面的c＃代码中动态创建一个超链接。我需要在客户端单击时调用JavaScript函数。我怎么做到这一点？在超链接上调用javascript函数点击

2009-08-12 ErnieStings

可能重复[如何使用链接调用JavaScript？]（http://stackoverflow.com/questions/688196/how-to- use-a-link-to-call-javascript） – Trilarion 2014-06-05 16:31:23

112

整洁依然，而不是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=""的情况下访问同一页）。

来源

2009-08-12 12:40:10 karim79

+13

+1这是目前唯一不引人注目的答案。如果可以的话+ 100。 – James 2009-08-12 12:56:54

@Lewis，是的，理想情况下标签不会用于纯js调用，但不幸的是旧版浏览器不支持：悬停非链接元素。所以经常使用链接来触发js事件。 – 2009-08-12 13:40:24

@克里斯 - 我不确定你是否明白我的观点。我建议您不要使用 Do nothing，而应使用Do something，然后使用渐进式增强来覆盖href。这是最干净的解决方案。锚是好的，但他们应该做SOMETHING如果JavaScript被禁用 - 或者由于某种原因（根据IE6）一些JavaScript在处理程序被创建和分配之前破坏了。这样你的所有用户都很开心。 – Lewis 2009-08-12 14:49:36

随着onClick参数中......

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

来源

2009-08-12 12:35:55 amischiefr

使用onclick HTML attribute。

的onclick事件处理程序捕获从元件上的用户的鼠标按钮点击事件到该 onclick属性被应用。这动作通常会导致作为一个JavaScript 功能的脚本方法这样的称呼[...]

来源

2009-08-12 12:38:24 Donut

理想情况下，我会避免在您的代码中生成链接，因为您的代码每次需要对每个链接的“标记”进行更改时都需要重新编译。如果你必须这样做，我不会在你的HTML中嵌入你的JavaScript'调用'，这完全是一个糟糕的做法，你的标记应该描述你的文档而不是它的作用，那就是你的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禁用的用户而中断，并且会有明确的问题分离。

希望有用。

来源

2009-08-12 12:52:16 Lewis

为什么选择C＃？为什么不只是'My Link'？ – Mahmoodvcs 2013-04-25 07:43:49

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

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

来源

2009-08-12 13:14:09 Simon

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>

来源

2009-08-12 13:28:07 elcuco

+44

JavaScript是为了开发jQuery而发明的？这是一个新的！ – palswim 2010-11-02 16:57:29

+29

这就像读了乐高被发明建造乐高蝙蝠侠一样。 – 2012-03-23 14:34:53

@ShawnSolomon我很高兴我们同意:) – elcuco 2012-03-26 05:42:34

我更喜欢使用的onclick方法，而不是为JavaScript超链接在href。并且总是使用警报来确定你有什么价值。

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

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

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

来源

2009-08-12 13:56:10 Marky

所有的简单的答案是...

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

来源

2012-09-11 23:54:58

你是一位祝福，帮助非JavaScript程序员。感谢Jayden！ – Fattie 2014-01-24 15:13:22

这似乎不工作在Firefox中 – Anthony 2015-08-24 21:16:19

安东尼似乎在Firefox中工作正常。 – 2016-06-28 01:35:44

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

的

来源

2017-10-27 15:48:04 user2197701

在超链接上调用javascript函数点击

回答

相关问题