Question

当用户点击链接时，我正在尝试使用AJAX加载一些内容，但我希望链接实际上转到某个位置，以便在禁用javascript时应用仍然有效。有没有办法只使用javascript做一些事情并在点击链接时取消导航？

最佳做法是什么？可以这样做，还是我需要使用javascript或什么替换链接？

Answer 1

如果你有这样的HTML：

<a href="no_javascript.html" id="mylink">Do Something</a>

你可以用jQuery做这样的事情：

$(document).ready(function() {
    $('#mylink').click(function() {
        doSomethingCool();
        return false; // cancel the event
    });
});

您所要做的就是使用Javascript取消点击事件，以防止发生默认操作。因此，当有人点击启用了Javascript的链接时，会调用doSomethingCool();并取消点击事件（因此return false;）并阻止浏览器转到指定的页面。但是，如果他们禁用了Javascript，则会直接将他们带到no_javascript.html。

Answer 2

使用Google Chrome浏览器，这一切都不适合我。

这是做了什么（使用jQuery）：

$(document).ready(function() {
    $('#mylink').click(function(event) {
        doSomethingCool();
        event.preventDefault(); // cancel the event
    });
});

Answer 3

为什么选择jQuery？

HTML：

<a href="no_javascript.html" onclick="return doSmth()">Link</a>

...和javascript代码：

function doSmth(){
  // your code here
  return false
}

Answer 4

我会做的是：

一个。对于href属性，将设置javascript:void();

湾对于onclick事件，将提供一个处理click事件的函数，该函数将返回false。

例如：

<script type="text/javascript">
   function myfunction()
   {
      //do something
      return false;
   }
   </script>

   <a href="javascript:void();" onclick="myfunction()">Link</a>

Answer 5

对于IE至少，只需将this.event.returnValue = false;放在方法的末尾。

e.g：

function onClickFunction()
 {
  someMethod();
  this.event.returnValue = false;
 }

我有一个复杂的方法可以解决这个问题。

Answer 6

我使用document.location.replace进行导航，但是当我想要取消导航时，return false（与document.location.replace功能相同）不会取消导航。

Answer 7

最好的方法应该是这个。

<a href="javascript:undefined"></a>

Answer 8

我刚用过

<a href="https://ryanhigdon.com" onClick={ event => {
  event.preventDefault()
}}>Take me away</a>

在我的用例中，我想在导航之前执行一些操作。

Answer 9

很简单，使用rel =“nofollow”属性

 <a href="signin.php" rel="nofollow">sign in</a>

如何在用户点击链接时取消导航（<a> element)?</a>

9 个答案: