Reputation: 32173
I have an anchor with both HREF
and ONCLICK
attributes set. If clicked and Javascript is enabled, I want it to only execute ONCLICK
and ignore HREF
. Likewise, if Javascript is disabled or unsupported, I want it to follow the HREF
URL and ignore ONCLICK
. Below is an example of what I'm doing, which would execute the JS and follow the link concurrently (usually the JS is executed and then the page changes):
<A HREF="http://example.com/no-js-login" ONCLICK="yes_js_login()">Log in</A>
what's the best way to do this?
I'm hoping for a Javascript answer, but I'll accept any method as long as it works, especially if this can be done with PHP.
I've read "a href link executes and redirects page before javascript onclick function is able to finish" already, but it only delays HREF
, but doesn't completely disable it. I'm also looking for something much simpler.
Upvotes: 125
Views: 307786
Reputation: 1239
Try using javascript:void(0)
as follows-
<a href="javascript:void(0)" onclick="...">Text</a>
Upvotes: 7
Reputation: 912
You can use the first un-edited solution, if you put return first in the onclick
attribute:
<a href="https://example.com/no-js-login" onclick="return yes_js_login();">Log in</a>
yes_js_login = function() {
// Your code here
return false;
}
Example: https://jsfiddle.net/FXkgV/289/
Upvotes: 88
Reputation: 14455
yes_js_login = function() {
// Your code here
return false;
}
If you return false it should prevent the default action (going to the href).
Edit: Sorry that doesn't seem to work, you can do the following instead:
<a href="http://example.com/no-js-login" onclick="yes_js_login(); return false;">Link</a>
Upvotes: 64
Reputation: 1785
In my case, I had a condition when the user click the "a" element. The condition was:
If other section had more than ten items, then the user should be not redirected to other page.
If other section had less than ten items, then the user should be redirected to other page.
The functionality of the "a" elements depends of the other component. The code within click event is the follow:
var elementsOtherSection = document.querySelectorAll("#vehicle-item").length;
if (elementsOtherSection> 10){
return true;
}else{
event.preventDefault();
return false;
}
Upvotes: 0
Reputation: 12238
Simply disable default browser behaviour using preventDefault
and pass the event
within your HTML.
<a href=/foo onclick= yes_js_login(event)>Lorem ipsum</a>
yes_js_login = function(e) {
e.preventDefault();
}
Upvotes: 52
Reputation: 755
You can use this simple code:
<a href="" onclick="return false;">add new action</a><br>
Upvotes: 22
Reputation: 7798
<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
Upvotes: 20
Reputation: 149
It's simpler if you pass an event parameter like this:
<a href="#" onclick="yes_js_login(event);">link</a>
function yes_js_login(e) {
e.stopImmediatePropagation();
}
Upvotes: 7
Reputation: 8046
This might help. No JQuery needed
<a href="../some-relative-link/file"
onclick="this.href = 'https://docs.google.com/viewer?url='+this.href; this.onclick = '';"
target="_blank">
This code does the following: Pass the relative link to Google Docs Viewer
this.href
So in your case this might work:
<a href="../some-relative-link/file"
onclick="this.href = 'javascript:'+console.log('something has stopped the link'); "
target="_blank">
Upvotes: 2
Reputation: 59
I solved a situation where I needed a template for the element that would handle alternatively a regular URL or a javascript call, where the js function needs a reference to the calling element. In javascript, "this" works as a self reference only in the context of a form element, e.g., a button. I didn't want a button, just the apperance of a regular link.
Examples:
<a onclick="http://blahblah" href="http://blahblah" target="_blank">A regular link</a>
<a onclick="javascript:myFunc($(this));return false" href="javascript:myFunc($(this));" target="_blank">javascript with self reference</a>
The href and onClick attributes have the same values, exept I append "return false" on onClick when it's a javascript call. Having "return false" in the called function did not work.
Upvotes: 1