How to cancel navigation when user clicks a link ( element)?

Question

I'm trying to load some stuff using AJAX when a user clicks a link, but I want the link to actually go somewhere so that the app still works when javascript is disabled. Is there any way to just do something with javascript and cancel navigation when a link is clicked?

What's the best practice? Can that be done, or do I need to replace the link using javascript or what?

Answer 1

If you have HTML like this:

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

You would do something like this with jQuery:

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

All you have to do is cancel the click event with Javascript to prevent the default action from happening. So when someone clicks the link with Javascript enabled, doSomethingCool(); is called and the click event is cancelled (thus the return false;) and prevents the browser from going to the page specified. If they have Javascript disabled, however, it would take them to no_javascript.html directly.

Answer 2

None of this worked for me with the Google Chrome browser.

Here's what did work though (using jQuery):

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

Answer 3

why jQuery?

HTML:

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

...and javascript code:

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

Answer 4

What I would do are :

a. for href attribute, javascript:void(); will be set

b. for onclick event, will provide a function to handle the click event and that function will return false.

eg:

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

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

Answer 5

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

with jQuery:

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

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

You assign class .ignore-click to as many elements you like and clicks on those elements will be ignored

Answer 6

for IE at least, just put this.event.returnValue = false; at the end of the method.

e.g:

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

I had a complex method where this did the trick.

Answer 7

I use document.location.replace to navigate, but when I want to cancel the navigation, return false (in the same function as document.location.replace) doesn't cancel the navigation.

Answer 8

The best way should be this.

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

Answer 9

I just used

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

In my use case I wanted to perform some actions before navigation.

Answer 10

is simple, use rel="nofollow" attribute

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