Question

我希望a标记包含href和onclick功能，但当用户点击该链接时，我不希望浏览器转到{{ 1}}但只需执行href。我尝试了以下方法：

onclick

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

注意：虽然它似乎在代码段编辑器中有效，但在整页中，浏览器会转到Google。

Answer 1

你不需要这一切，只需在你的onclick处理程序中添加return false即可：

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>然后修改后的脚本

＆＃13;

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

＆＃13;

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

＆＃13;

这样说：

 <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 个答案: