href与onclick中的JavaScript函数

13 回答

• 15

  让 javascript: 在任何属性中都没有't specifically for scripting is an outdated method of HTML. While technically it works, you'仍然将javascript属性分配给非脚本属性，这不是't good practice. It can even fail on old browsers, or even some modern ones (a googled forum post seemd to indicate that Opera does not like ' javascript：'urls） .

  更好的做法是第二种方法，将您的javascript放入 onclick 属性，如果没有可用的脚本功能，则忽略该属性 . 在href字段中放置一个有效的URL（通常为'#'），以便为没有javascript的人提供后备 .

  回复于 2024-04-27T14:31:23+08:00
• 4

  它使用这行代码对我有用：

  <a id="LinkTest" title="Any Title"  href="#" onclick="Function(); return false; ">text</a>
  

  回复于 2024-04-27T14:31:23+08:00
• 61

  <hr>
              <h3 class="form-signin-heading"><i class="icon-edit"></i> Register</h3>
              <button data-placement="top" id="signin_student" onclick="window.location='signup_student.php'" id="btn_student" name="login" class="btn btn-info" type="submit">Student</button>
              <div class="pull-right">
                  <button data-placement="top" id="signin_teacher" onclick="window.location='guru/signup_teacher.php'" name="login" class="btn btn-info" type="submit">Teacher</button>
              </div>
          </div>
              <script type="text/javascript">
                  $(document).ready(function(){
                  $('#signin_student').tooltip('show'); $('#signin_student').tooltip('hide');
                  });
              </script>   
              <script type="text/javascript">
                  $(document).ready(function(){
                  $('#signin_teacher').tooltip('show'); $('#signin_teacher').tooltip('hide');
                  });
              </script>
  

  回复于 2024-04-27T14:31:23+08:00
• 882

  除此之外，href显示在浏览器的状态栏上，而不是onclick . 我认为在那里显示javascript代码不是用户友好的 .

  回复于 2024-04-27T14:31:23+08:00
• 4

  我用

  Click <a nohref style="cursor:pointer;color:blue;text-decoration:underline"
  onClick="alert('Hello World')">HERE</a>
  

  很长一段路，但它完成了工作 . 使用A样式进行简化然后变为：

  <style> A {cursor:pointer;color:blue;text-decoration:underline; } </style> 
  <a nohref onClick="alert('Hello World')">HERE</a>
  

  回复于 2024-04-27T14:31:23+08:00
• 236

  bad:

  <a id="myLink" href="javascript:MyFunction();">link text</a>
  

  good:

  <a id="myLink" href="#" onclick="MyFunction();">link text</a>
  

  better:

  <a id="myLink" href="#" onclick="MyFunction();return false;">link text</a>
  

  even better 1:

  <a id="myLink" title="Click to do something"
   href="#" onclick="MyFunction();return false;">link text</a>
  

  even better 2:

  <a id="myLink" title="Click to do something"
   href="PleaseEnableJavascript.html" onclick="MyFunction();return false;">link text</a>
  

  为什么更好？因为 return false 会阻止浏览器关注链接

  best:

  使用jQuery或其他类似的框架通过元素的ID附加onclick处理程序 .

  $('#myLink').click(function(){ MyFunction(); return false; });
  

  回复于 2024-04-27T14:31:23+08:00
• 8

  最好的方法是：

  <a href="#" onclick="someFunction(e)"></a>
  

  问题是，这将在浏览器的页面末尾添加一个哈希（＃），因此要求用户单击两次后退按钮才能转到您的页面之前 . 考虑到这一点，您需要添加一些代码来停止事件传播 . 大多数javascript工具包已经有了这个功能 . 例如，dojo工具包使用

  dojo.stopEvent(event);
  

  这样做 .

  回复于 2024-04-27T14:31:23+08:00
• 3

  将onclick放在href中会冒犯那些坚信内容与行为/行为分离的人 . 这个论点是你的html内容应该只关注内容，而不是表现或行为 .

  这些天的典型路径是使用javascript库（例如jquery）并使用该库创建事件处理程序 . 它看起来像：

  $('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );
  

  回复于 2024-04-27T14:31:23+08:00
• 6

  就javascript而言，一个区别是 onclick 处理程序中的 this 关键字将引用其 onclick 属性的DOM元素（在本例中为 <a> 元素），而 href 属性中的 this 将引用 window 对象 .

  在表示方面，如果链接中没有 href 属性（即 <a onclick="[...]"> ），则默认情况下，浏览器将显示 text 光标（而不是常用的 pointer 光标），因为它将 <a> 视为锚点，并且不是链接 .

  在行为方面，当通过 href 导航指定操作时，浏览器通常支持使用快捷方式或上下文菜单在单独的窗口中打开 href . 仅通过 onclick 指定操作时，这是不可能的 .

  ---

  但是，如果您询问从点击DOM对象获取动态操作的最佳方法是什么，那么使用与文档内容分开的javascript附加事件是最好的方法 . 你可以通过多种方式实现这一目标 . 一种常见的方法是使用像jQuery这样的javascript库绑定事件：

  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <a id="link" href="http://example.com/action">link text</a>
  <script type="text/javascript">
      $('a#link').click(function(){ /* ... action ... */ })
  </script>
  

  回复于 2024-04-27T14:31:23+08:00
• 10

  这很有效

  <a href="#" id="sampleApp" onclick="myFunction(); return false;">Click Here</a>
  

  回复于 2024-04-27T14:31:23+08:00
• 10

  就个人而言，我发现在HREF标签中放置javascript调用很烦人 . 我通常不会注意某些东西是否是javascript链接，并且经常想要在新窗口中打开东西 . 当我尝试使用这些类型的链接之一时，我得到一个空白页面，其中没有任何内容和javascript在我的位置栏中 . 但是，使用onlick可以稍微回避一下 .

  回复于 2024-04-27T14:31:23+08:00
• 1

  最好的答案是一个非常糟糕的做法，永远不应该链接到空哈希，因为它可能会在未来产生问题 .

  最好是将一个事件处理程序绑定到该元素，正如许多其他人所说，然而， <a href="javascript:doStuff();">do stuff</a> 在每个现代浏览器中都能很好地工作，并且在渲染模板时我会广泛使用它，以避免为每个实例重新绑定 . 在某些情况下，此方法可提供更好的性能 . 因人而异

  另一个有趣的tid-bit ....

  onclick ＆ href 直接调用javascript时有不同的行为 .

  onclick 将正确传递 this 上下文，而 href 将不会，或换句话说 <a href="javascript:doStuff(this)">no context</a> 将不起作用，而 <a onclick="javascript:doStuff(this)">no context</a> 将 .

  是的，我省略了 href . 虽然这不符合规范，但它适用于所有浏览器，但理想情况下它应包含 href="javascript:void(0);" 以获得良好的衡量标准

  回复于 2024-04-27T14:31:23+08:00
• 5

  使用javascript时使用“href”时我注意到的另一件事：

  如果2次点击之间的时差非常短，则不会执行“href”属性中的脚本 .

  例如，尝试运行以下示例和双击（快速！）每个链接 . 第一个链接只执行一次 . 第二个链接将执行两次 .

  <script>
  function myFunc() {
      var s = 0;
      for (var i=0; i<100000; i++) {
          s+=i;
      }
      console.log(s);
  }
  </script>
  <a href="javascript:myFunc()">href</a>
  <a href="#" onclick="javascript:myFunc()">onclick</a>
  

  在Chrome（双击）和IE11（三次点击）中重现 . 在Chrome中，如果点击速度足够快，则可以进行10次点击，只执行1次功能 .

  Firefox工作正常 .

  回复于 2024-04-27T14:31:23+08:00