在超链接上调用javascript函数,请单击


Answers:


133

还是Neater,而不是typical href="#"or或href="javascript:void"or 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="")。


13
+1这是目前唯一的回答。如果可以的话,+ 100。
詹姆斯,

@Lewis,是的,理想情况下<a>标记不会用于纯js调用,但不幸的是,较旧的浏览器不支持:hover用于非链接元素。因此,链接通常用于触发js事件。
克里斯·范·欧普斯塔

@克里斯-我不确定你是否理解克里斯。我建议您不要使用<a href="#">不执行任何操作</a>,而是使用<a href="a/link/somwhere.html">执行某些操作</a>,然后使用逐步增强以覆盖href。这是最干净的解决方案。锚点很好,但是如果禁用了javascript,则锚定应该执行某些操作-或出于某种原因(按照IE6),在创建和分配处理程序之前,某些javascript中断了。这样,您的所有用户都会感到满意。
刘易斯2009年

2
不适用于我,只是在页面加载时自动执行onclick函数。对于可访问性,这似乎也像一场噩梦。
肖恩·所罗门

4
这是行不通的,它只会将您定向到href网址。
paddotk

58

最简单的答案是...

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


2
StackOverflow“运行代码段”中的链接在Firefox中不起作用(未创建警报),但是当我将这种类型的链接放在普通网页上时,它在FF中有效。
the_pwner224

是的,很奇怪,它正在为我工​​作,现在不是。其他人也有类似的问题,除了完全重新安装Firefox外,似乎没有确定的解决方案。
贾登·劳森

26

使用onclick参数...

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

令人困惑的声明。是去google.com还是调用javascript函数?哪个优先?
Nguai al

12

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>

53
发明JavaScript是为了开发jQuery?那是新的!
palswim

35
这就像读到乐高是为了建造乐高蝙蝠侠而发明的。
肖恩·所罗门

5
@ShawnSolomon我很高兴我们同意:)
elcuco 2012年

1
@elcuco,非常讽刺!+'d :)万岁JQuery
Zuul 2012年

6

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

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

它也可以在输入标签上使用。

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


3

理想情况下,我将避免在代码中完全生成链接,因为每次您要更改每个链接的“标记”时,您的代码都需要重新编译。如果必须这样做,我不会将您的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的用户,您的代码不会中断,并且可以清楚地将关注点分开。

希望是有用的。


1
为什么要使用C#?为什么不只是<a href="https://stackoverflow.com/link/for/javascriptDisabled/Browsers.aspx" id="uxAncMyLink">My Link</a>呢?
Mahmoodvcs

2

我通常建议直接使用element.attachEvent(IE)或element.addEventListener(其他浏览器)来代替onclick事件的设置,因为后者将替换该元素的所有现有事件处理程序。

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


1

使用onclickHTML属性

onclick事件处理程序捕获来自用户的鼠标按钮,其中所述元件上的点击事件 onclick被施加属性。此操作通常会导致调用脚本方法,例如JavaScript函数[...]


1

如果您不等待页面加载,则将无法通过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>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.