How to cancel navigation when user clicks a link (<a> element)?
JqueryJquery Problem Overview
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?
Jquery Solutions
Solution 1 - Jquery
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.
Solution 2 - Jquery
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
});
});
Solution 3 - Jquery
why jQuery?
HTML:
<a href="no_javascript.html" onclick="return doSmth()">Link</a>
...and javascript code:
function doSmth(){
// your code here
return false
}
Solution 4 - Jquery
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>
Solution 5 - Jquery
<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
Solution 6 - Jquery
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.
Solution 7 - Jquery
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.
Solution 8 - Jquery
The best way should be this.
<a href="javascript:undefined"></a>
Solution 9 - Jquery
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.
Solution 10 - Jquery
is simple, use rel="nofollow" attribute
<a href="signin.php" rel="nofollow">sign in</a>