jQuery触发锚的onclick事件，而不将浏览器发送到href

Question

我想要a带有href和onclick函数a标签，但是当用户单击链接时，我不希望浏览器转到href而只是执行onclick 。 我尝试了以下方法：

 function testFunc() { document.getElementById("testDiv").innerHTML = "it works!"; } $('.testClass').click(function(event) { $(this).trigger("onclick"); event.preventDefault(); });

 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <a href="http://www.google.com" class="testClass" onclick="testFunc()">click me</a> <div id="testDiv"></div>

注意：虽然它在代码段编辑器中似乎可以正常工作，但在整个页面中，浏览器的确可以访问Google。

Answer 1

您不需要所有这些，只需将return false添加到onclick处理程序即可：

 function testFunc() { document.getElementById("testDiv").innerHTML = "it works!"; return false; }

 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <a href="http://www.google.com" class="testClass" onclick="testFunc()">click me</a> <div id="testDiv"></div>

Answer 2

您的问题是两次触发单击，首先是单击元素，然后是发生单击，因此您应在防止默认设置后将其他功能放到第一位。 使用event.preventDefault();

我将此行<a href="http://www.google.com" class="testClass" onclick="testFunc()">click me</a>替换为此<a href="http://www.google.com" class="testClass" >click me</a>然后修改脚本

 function testFunc() { document.getElementById("testDiv").innerHTML = "it works!"; } $('.testClass').click(function(event) { event.preventDefault(); testFunc(); });

 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <a href="http://www.google.com" class="testClass">click me</a> <div id="testDiv"></div>

这样说：

 <html>
 <head>
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 


 </head>
 <body>

<a href="http://www.google.com" class="testClass">click me</a> 

<div id="testDiv"></div>
<script>
  function testFunc() {
    document.getElementById("testDiv").innerHTML = "it works!";
  }

  $('.testClass').click(function(event) {
    event.preventDefault();
    testFunc();

  });
   </script>
 </body>
</html>

jQuery触发锚的onclick事件，而不将浏览器发送到href

问题描述

2 个解决方案

解决方案1
3 2018-03-07 20:44:53

解决方案2
0 已采纳 2018-03-07 20:57:06

jQuery触发锚的onclick事件，而不将浏览器发送到href

问题描述

2 个解决方案

解决方案1 3 2018-03-07 20:44:53

解决方案2 0 已采纳 2018-03-07 20:57:06

解决方案1
3 2018-03-07 20:44:53

解决方案2
0 已采纳 2018-03-07 20:57:06