当用户点击链接（<a>元素）时如何取消导航？

如果你有这样的 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 的链接时，会调用该链接并取消 click 事件（因此 ），并阻止浏览器转到指定的页面。但是，如果他们禁用了 Javascript，则会直接将其带到。doSomethingCool();return false;no_javascript.html

为什么选择jQuery？

HTML格式：

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

...和 JavaScript 代码：

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

我曾经导航，但是当我想取消导航时，（在与 相同的功能中）不会取消导航。document.location.replacereturn falsedocument.location.replace

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

例如：

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

我有一个复杂的方法，可以做到这一点。

这些都不适用于 Google Chrome 浏览器。

以下是有效的方法（使用jQuery）：

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

我会做的是：

a. 对于 href 属性，将设置javascript:void();

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

例如：

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

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

<a href="http://www.google.com" class="ignore-click">Test</a>

使用 jQuery：

<script>
    $(".ignore-click").click(function(){
        return false;
    })
</script>

使用 JavaScript

<script>
        for (var i = 0; i < document.getElementsByClassName("ignore-click").length; i++) {
            document.getElementsByClassName("ignore-click")[i].addEventListener('click', function (event) {
                event.preventDefault();
                return false;
            });
        }
</script>

您将类分配给任意数量的元素，单击这些元素将被忽略.ignore-click

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

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

最好的方法应该是这个。

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

我刚刚用过

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

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

CANCEL CLICK ON LINK 标签 A

在按住单击键的那一刻，检查条件数据并为链接分配状态活动

实现了水平滑块的滚动。按住单击并左右移动内容。 当选择元素时，内容中的链接应保持活动状态，但是当您按住鼠标并移动时，请取消内部标记 a 的事件

let linkActive;
let cont = document.addEventListener('.cont');


let toggleActiveEvent = (prop, event, revoke) => {
    if (event.target.tagName === 'A' || linkActive) {
        (linkActive ? linkActive : event.target).style.pointerEvents = prop;
        linkActive = revoke ? null : event.target;
        return event.preventDefault();
    }
};

cont.addEventListener('mousedown', (event) => {
    toggleActiveEvent('none', event);
});
cont.addEventListener('click', (event) => {
    event.preventDefault();
});
cont.addEventListener('mouseup', (event) => {
    toggleActiveEvent('all', event, true);
});

МАКЕТ

<div class="cont"><a href="/"></a></div>

---

CSS 指针事件支持的 BROWSER（用于 HTML）