42

如何从href调用javascript？

喜欢：

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

11 回答 11

43

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

**编辑**
从一连串的评论中，我正在分享给定/找到的资源。

以前的 SO Q 和 A：

有趣的阅​​读：

于 2013-05-02T12:23:31.463 回答
23 
<a href="javascript:call_func();">...</a>

然后该函数必须返回 false 以便浏览器不会转到另一个页面。

但我建议使用 jQuery (with $(...).click(function () {})))

于 2013-05-02T12:23:38.463 回答
12

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

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

尽管甚至“更合适”的方法是将其全部从 html 中取出，并在加载 dom 时将处理程序与另一个 javascript 添加。

于 2013-05-02T12:24:48.150 回答
3

使用 JQuery 会很好；

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



$("#yourLink").click(function(e){
//do what ever you want...
});
于 2013-05-02T12:24:17.533 回答
3

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

在 HTML 文档的头部

<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 文档的头部

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

在 HTML 文档的正文中 

<a href="#" id="mylink">Call JavaScript </a>
于 2013-05-02T12:24:21.790 回答
3

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

<a href="http://stackoverflow.com/questions/16337937/how-to-call-javascript-from-a-href" 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/

于 2013-05-02T12:57:16.690 回答
2

不知道为什么这对我有用，而其他什么都没有，但以防万一其他人还在寻找......

在头部标签之间：

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

然后对于 <a> 标签：

<a href='' onclick='myFunction()' > Call Function </a>
于 2017-11-07T07:28:21.073 回答
2 
 <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>
于 2018-03-31T12:35:44.193 回答
1

如果您只想处理一个函数而不处理它自己的 href，请在函数末尾添加 return false 语句：

 <a href="#" onclick="javascript: function() {... ; return false} return false">click</>
于 2013-05-02T12:27:58.557 回答
0

另一种方法是：

<a href="javascript:void(0);" onclick="alert('testing')">
于 2015-12-10T09:55:33.530 回答
0

Edit 这将在单击编辑函数名称后创建一个带有 Edit 的链接，因为将调用edit 。

于 2017-05-12T11:22:36.657 回答