如何从a标签中调用JavaScript？

Question

如何从href中调用JavaScript？

像这样：

<a href="<script type='text/javascript'>script code</script>/">Call JavaScript</a>

- user2033281

---

https://dev59.com/w3NA5IYBdhLWcg3wKaYx - Dmitry Volokh

除非有令人信服的理由，否则在这种情况下最好使用<input type="button" />。 - user1720624

Answer 1

<a onClick="yourFunction(); return false;" href="fallback.html">One Way</a>

** 编辑 **
根据众多评论，我分享了给出/找到的资源。

之前的SO问答：

• 你是否需要在onclick中指定'javascript:'？（以及后面的IE相关答案）
• href中的javascript函数与onclick中的区别

有趣的阅读材料：

• 这里（存档）
• 这里

- Dawson

---

@Dawson - 在onclick属性中不需要使用javascript:。 - PhonicUK

当然可以，但必须确保 JavaScript 已可用。我不喜欢依赖于客户端。我也不想依赖于人们在 UI 中掌握任何技能（计划以最低公共分母为准，即使您的访客智商也是如此）。 - Dawson

@Dawson 如果没有 Js，onclick 属性就什么也不做。javascript: 前缀实际上是没有必要的。 - bwoebi

@PhonicUK -- 我会回复你的。我从1997年开始就一直在像Q这样的JS解决方案中使用它。我猜当时是为了Netscape或IE而需要它。那时我只是在学习这些东西，所以我没有质疑那些事情。现在它已经成为了一种根深蒂固的习惯。 - Dawson

@FelixKling -- 从你发来的链接中可以看到："在IE中可以将默认语言设置为VBScript" << 这就是我们当时这样做的原因。具有讽刺意味的是，我职业生涯中99%的时间都是在Mac上开发。我曾经在.NET环境下编写过代码，但我不记得我们是否可以从codebehind文件或javascript中调用函数。现在没有测试这个理论的手段。非常有趣。 - Dawson

Answer 2

<a href="javascript:call_func();">...</a>

函数必须返回false，以防浏览器跳转到另一个页面。

但我建议使用jQuery（带有$(...).click(function () {})）。

- bwoebi

---

一个链接，一个页面。添加一个JS库？在jQuery出现之前我们都有工作，在jQuery被遗忘时我们也会有工作。 - Dawson

@Dawson 在接触jQuery之前，我什么都没写过;-) ... 但我不认为JQ会很快被遗忘...也许十年后？也许当出现更好的替代品时... - bwoebi

我明白。但这正是重点所在。这个问题不需要使用库，而且10年前也可以用同样的方式提问和回答。 - Dawson

@Dawson 那么你也可以问：如果规范不再支持JS，而是其他语言呢？一个库可能会通过解析和转换来替换旧的JS代码，然后进行评估。 - 一旦在服务器上有一个可用的版本，库代码就会起作用。 - bwoebi

@Dawson 这只是一条通知，我认为这样更好。我并不是说你必须使用它。 - bwoebi

Answer 3

在点击链接时调用javascript代码的正确方法是添加一个onclick处理程序：

<a href="#" onclick="myFunction()">LinkText</a>

尽管一种更加“妥善”的方法是完全将其从html中移除，并在dom加载时使用另一个javascript添加处理程序。

- NilsH

---

这是不好的做法。应该是 <a href="javascript:void(0)" onClick="myFunction">链接文本</a>。 - Pants

Answer 4

 <a href="javascript:
  console.dir(Object.getOwnPropertyDescriptors(HTMLDivElement))">
       1. Direct Action Without Following href Link
  </a>

<br><br>

  <a href="javascript:my_func('http://diasmath.blogg.org')">
      2. Indirect Action (Function Call) Without Following Normal href Link
  </a>

<br><br>

 <!-- Avec « return false » l'action par défaut de l'élément
 // <a></a> (ouverture de l'URL pointée par
 // « href="http://www.centerblog.net/gha" »)
 // ne s'exécute pas.
 -->
 <a target=_new href="http://www.centerblog.net/gha"
          onclick="my_func('http://diasmath.blogg.org');
 return false">
     3. Suivi par défaut du Lien Normal href Désactivé avec
     « return false »
  </a>

<br><br>

 <!-- Avec ou sans « return true » l'action par défaut de l'élément
 // s'exécute pas.
 -->
 <a target=_new href="http://gha.centerblog.net"
          onclick="my_func('http://diasmath.blogg.org');">
     4. Suivi par défaut du Lien Normal href Conservé avec ou sans
     « return true » qui est la valeur retournée par défaut.
  </a>

<br><br>

<!-- Le diese tout seul ne suit pas le lien href. -->
  <a href="#" onclick="my_func('http://diasmath.blogg.org')">
      5. Lien Dièse en Singleton (pas de suivi href)
  </a>

  <script language="JavaScript">
   function my_func(s) {
       console.dir(Object.getOwnPropertyDescriptors(Document));
       window.open(s)
   }
  </script>

<br>
<br>

 <!-- Avec GESTION D'ÉVÉNEMENT.
 // Événement (event) = click du lien
 // Event Listener = "click"
 // my_func2 = gestionnaire d'événement
 -->
  <script language="JavaScript">
   function my_func2(event) {
      console.dir(event);
      window.open(event.originalTarget["href"])
   }
  </script>
 <a target=_blank href="http://dmedit.centerblog.net"
     id="newel" onclick="return false">
     6. By specifying another eventlistener
     (and deactivating the default).
  </a>
  <script language="JavaScript">
      let a=document.getElementById("newel");
      a.addEventListener("click",my_func2)
  </script>

- Jean-Dadet Diasoluka

---

每个链接都代表一种可能性的说明。 - Jean-Dadet Diasoluka

Answer 5

使用JQuery会很好；

<a href="#" id="youLink">Call JavaScript </a>



$("#yourLink").click(function(e){
//do what ever you want...
});

- Ahmet DAL

---

提供信息 - 我猜你被投下反对票是因为这个问题早在1997年就可以发布了。当时已经有解决方案了，但是 JQuery 还没有出现。 - Dawson

我并不是这个意思。我的意思是，这个解决方案不需要JS库。你的评论似乎在暗示如果没有JQ，Web就会崩溃。 - Dawson

你假定得太多了，我不建议这样做，也没有其他解决方案。我只是说这样做会很好。 - Ahmet DAL

我并没有做出任何假设。问题甚至标记了“javascript”“html”。我使用问题/标签的要求来制定我的答案。 - Dawson

好的。JQuery是Python库之一，而不是Javascript。 - Ahmet DAL

+1赞成展示这个简洁、优雅的解决方案。当已经在jQuery轨道上时（这天谁不是呢？），这是最好的答案。 - jboi

Answer 6

JavaScript代码通常从链接的onclick事件中调用。例如，您可以改成：

在HTML文档的Head部分中

<script type='text/javascript'>
function myFunction(){
//...script code
}
</script>

在HTML文档主体中

<a href="#" id="mylink" onclick="myFunction(); return false">Call JavaScript </a>

或者，您也可以使用链接的ID、HTML DOM或类似JQuery的框架将函数附加到链接上。

例如：

在HTML文档的Head部分

<script type='text/javascript'>
document.getElementById("mylink").onclick = function myFunction(){ ...script code};
</script>

在HTML文档的正文中

<a href="#" id="mylink">Call JavaScript </a>

- KernelPanik

Answer 7

我建议避免使用内联JavaScript，如我在评论中提到的那样，我也可能会使用<input type="button" />。话虽如此...

<a href="https://dev59.com/OGQo5IYBdhLWcg3wE8C2" id="mylink">Link.</a>

---

var clickHandler = function() {
     alert('Stuff happens now.');   
}


if (document.addEventListener) {
    document.getElementById('mylink').addEventListener('click', clickHandler, false);
} else {
    document.getElementById('mylink').attachEvent('click', clickHandler);
}

---

http://jsfiddle.net/pDp4T/1/

- user1720624

Answer 8

我不确定为什么这个方法对我有效，而其他方法都不行，但以防其他人仍在寻找答案...

在头标签之间：

<script>
     function myFunction() {
           script code
     }
</script>

然后对于 < a > 标签：

<a href='' onclick='myFunction()' > Call Function </a>

- Sean Ciminello

Answer 9

如果你只想处理一个函数而不是处理href本身，在你的函数结尾添加"return false"语句即可：

 <a href="#" onclick="javascript: function() {... ; return false} return false">click</>

- Yannick G

---

三点说明：1）javascript:在这里是无用的；2）你定义了一个函数但从未调用它；3）你定义函数的方式可能会导致语法错误。 - Felix Kling

Answer 10

另一种方式是：

<a href="javascript:void(0);" onclick="alert('testing')">

- vanessen