如何使用链接调用JavaScript?


166

如何使用链接调用JavaScript代码?

Answers:


192
<a onclick="jsfunction()" href="#">

要么

<a onclick="jsfunction()" href="javascript:void(0);">

编辑:

上面的回答确实不是一个好的解决方案,自从我最初发布以来,已经学到了很多有关JS的知识。有关解决此问题的更好方法,请参见下面的EndangeredMassa答案


11
我建议您使用第二个,因为第一个将您滚动到页面顶部。
马特·格兰德

7
是的,除非您添加“ return false”,否则肯定会。在您的职能之后。
切尔西

26
这是1998年的代码。使用不打扰的解决方案之一。请。
Andrew Hedges

7
都不用!链接用于链接,不是调用javascript的虚拟元素。
I.devries

4
如果您打算将javascript内联,请按以下方式进行操作:<a onclick="jsfunction;return false" href="linkasnormal">
Fire Crow,2009年

201

简洁的JavaScript,无库依赖:

<html>
<head>
    <script type="text/javascript">

        // Wait for the page to load first
        window.onload = function() {

          //Get a reference to the link on the page
          // with an id of "mylink"
          var a = document.getElementById("mylink");

          //Set code to run when the link is clicked
          // by assigning a function to "onclick"
          a.onclick = function() {

            // Your code here...

            //If you don't want the link to actually 
            // redirect the browser to another page,
            // "google.com" in our example here, then
            // return false at the end of this block.
            // Note that this also prevents event bubbling,
            // which is probably what we want here, but won't 
            // always be the case.
            return false;
          }
        }
    </script>
</head>
<body>
    <a id="mylink" href="http://www.google.com">linky</a>        
</body>
</html>

26
您能解释一下为什么这比当前接受的答案更好,以及脚本应该在页面中的什么位置(因为这显然是初学者级的问题)?
比尔蜥蜴

8
当然可以 更新。
EndangeredMassa

6
那么,href如果我不想重定向用户而只想运行一些代码,该怎么办?编辑:我看到它可以留为空白:href=""
SabreWolfy 2012年

6
为什么最好onclick通过通过添加事件window.onload,而不是onclick直接将其放入<a>代码?
内森·里德

10
如果您担心的一个问题是您不想将工作的功能单元拆分到源文件中的不同物理位置,也不想分散在许多源文件中。如果您将JavaScript调用放入href标记中,则只需看一行即可清楚地了解情况。我会担心将功能划分到不同的物理位置,而这些位置很难了解正在发生的事情。也许那只是我的风格。
stu 2014年

47
<a href="javascript:alert('Hello!');">Clicky</a>

多年后编辑:不!永远不要这样做!我当时年少无知!

再次编辑:几个人问您为什么不应该这样做。有两个原因:

  1. 演示文稿: HTML应该专注于演示文稿。将JS放在HREF中意味着您的HTML现在正在处理业务逻辑。

  2. 安全性: HTML中的Javascript违反了内容安全策略(CSP)。内容安全策略(CSP)是安全性的附加层,有助于检测和缓解某些类型的攻击,包括跨站点脚本(XSS)和数据注入攻击。这些攻击可用于从数据盗窃到站点损坏或恶意软件分发的所有方面。在这里阅读更多

  3. 可访问性:锚标记用于链接到其他文档/页面/资源。如果您的链接没有到任何地方,则应为一个按钮。这样,屏幕阅读器,盲文终端等就可以轻松确定发生了什么,并为视障用户提供有用的信息。


16
也许对这种方法的问题有一些描述?这是有过之而无不及href='#'alert()onclick
托马斯·阿勒


1
嗨,我也不确定为什么不使用它?我陷入了需要调用JS函数的情况,但是我只能指定一个链接。并且您的解决方案有效。
skapie19

43

而且,为什么不让jQuery变得不引人注目:

  $(function() {
    $("#unobtrusive").click(function(e) {
      e.preventDefault(); // if desired...
      // other methods to call...
    });
  });

的HTML

<a id="unobtrusive" href="http://jquery.com">jquery</a>

2
这对SEO有用吗,以便爬虫将找到链接并关注它?
Ahi Tuna

11
因为不是每个人都使用jquery。
stu 2014年

1
@GregMiernicki是和否取决于链接的含义。查看HTML。网络爬虫或任何禁用了javascript的客户端都将访问给定的HREF。启用了JavaScript的客户端将运行click动作,然后在该函数未返回假值或调用preventDefault的情况下跟随链接。在这种情况下,href是一个后备,因此为什么将其称为“不引人注意”
Evan Langlois

12

不打扰的Javascript有很多优点,这是它采取的步骤以及为什么要好用。

  1. 链接正常加载:

    <a id="DaLink" href="http://host/toAnewPage.html">点击此处</a>

这很重要,因为它适用于未启用javascript的浏览器,或者javascript代码中的错误不起作用。

  1. javascript在页面加载时运行:

     window.onload = function(){
            document.getElementById("DaLink").onclick = function(){
                   if(funcitonToCall()){
                       // most important step in this whole process
                       return false;
                   }
            }
     }
  2. 如果javascript成功运行,也许使用javascript加载了当前页面中的内容,则返回false将取消链接触发。换句话说,如果javascript成功运行,则将return false设置为禁用链接的效果。如果javascript不允许运行它,则可以做一个很好的备份,以便您的内容以任何一种方式显示,对于搜索引擎来说,如果您的代码中断了,或者可以在非JavaScript系统上查看。

关于这个主题的最好的书是杰里米·基思(Jeremy Keith)的“ Dom Scription”


9

或者,如果您使用的是PrototypeJS

<script type="text/javascript>
  Event.observe( $('thelink'), 'click', function(event) {
      //do stuff

      Event.stop(event);
  }
</script>

<a href="#" id="thelink">This is the link</a>

1
我喜欢不必将事件处理功能放在行内。
Mark Biek 09年

1
这是唯一的方法。请否定内联答案。如今,这是没有任何借口的做法。
Andrew Hedges

5
@Andrew:请留下您的评论,并解释为什么内联答案不好。
比尔蜥蜴

8

我认为您可以使用该onclick事件,如下所示:

<a onclick="jsFunction();">

0

基于@mister_lucky答案与jquery一起使用:

$('#unobtrusive').on('click',function (e) {
    e.preventDefault(); //optional
    //some code
});

HTML代码:

<a id="unobtrusive" href="http://jquery.com">jquery</a>

-2

只需使用javascript:----示例

javascript:var JFL_81371678974472 = new JotformFeedback({ formId: '81371678974472', base: 'https://form.jotform.me/', windowTitle: 'Photobook Series', background: '#e44c2a', fontColor: '#FFFFFF', type: 'false', height: 700, width: 500, openOnLoad: true })
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.