Question

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

Answer 1

不引人注目的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>

Answer 2

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

或

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

编辑：

上面的回答确实不是一个好的解决方案，自从我最初发布以来已经学习了很多关于JS的知识。请参阅下面的EndangeredMassa's answer以获得解决此问题的更好方法。

Answer 3

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

编辑，多年后：不！不要这样做！我年轻而愚蠢！

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

演示文稿： HTML应专注于演示文稿。将JS放在HREF中意味着您的HTML现在有点处理业务逻辑。
安全性：您的HTML中的Javascript违反了Content Security Policy (CSP)。内容安全策略（CSP）是一个增加的安全层，可帮助检测和缓解某些类型的攻击，包括跨站点脚本（XSS）和数据注入攻击。这些攻击用于从数据窃取到站点破坏或恶意软件分发的所有内容。 Read more here
辅助功能：锚标记用于链接到其他文档/页面/资源。 If your link doesn't go anywhere, it should be a button。这使得屏幕阅读器，盲文终端等更容易确定正在发生的事情，并为视障用户提供有用的信息。

Answer 4

而且，为什么不用jQuery不引人注目：

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

HTML

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

Answer 5

不引人注目的Javascript有许多优点，以下是它需要采取的步骤以及使用它的原因。

链接正常加载：

＆lt; a id =“DaLink”href =“http：//host/toAnewPage.html”＆gt;点击此处＆lt; / a＆gt;

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

javascript在页面加载时运行：

 window.onload = function(){
        document.getElementById("DaLink").onclick = function(){
               if(funcitonToCall()){
                   // most important step in this whole process
                   return false;
               }
        }
 }

如果javascript成功运行，可能使用javascript加载当前页面中的内容，返回false会取消链接触发。换句话说，如果javascript成功运行，put return false会禁用链接。虽然javascript没有允许它运行，但是做一个很好的备份，以便你的内容以任何方式显示，搜索引擎和代码中断，或者在非javascript系统上查看。

Answer 6

或者，如果您使用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>

Answer 7

我认为您可以使用onclick事件，如下所示：

<a onclick="jsFunction();">

Answer 8

只需使用javascript：---- exemplale

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

Answer 9

基于@mister_lucky答案与jquery配合使用：

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

HTML代码：

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

Answer 10

您可以使用按钮并将其样式设置为链接： HTML代码：

button {
width:0.0000000001px;
height:0.00000000001px;
  background-color: #ffffff;
  color: Blue;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
}

<button  onclick="function()"><u>Example button</u></button>

如何使用链接来调用JavaScript？

10 个答案: