Can I use href like an onclick? - javascript

I just can not figure a way to use location.href to act like you're clicking on a link.
What I am trying to do is get the variables included, for example,
The regular link is like this and works fine:
Click Me
I am trying to call a function using href (or some other method) to open the image with the other parameters just as if you were to click on the link.
I hope I am explaining this correctly.
Thanks for any help.
-UPDATE-
I finally found my solution here Displaying the Popup box generated by Greybox on page load(onLoad)
Thank you all for your suggestions.

Add an onclick event to your link. Using JQuery, you could ofcourse bind the click event to the links, and use .preventDefault() to block the anchor tag workin. Much cleaner code also.
$(document).ready(function(){
$('a').bind('click', function(e){
e.preventDefault();
//do whatever you wish to do
});
});

Answer: Yes.
Click Me

location.href or window.location.href refers to the browsers current address. If you change the value of location.href the browser will use that value as it's address. So if you want to navigate your browser to a link programmatically, you just have to change its value.
If you just want a clickhandler for your link don't use onclick or href, that's just bad practice, use a sepperate script that does this unobtrusively like so:
var button = document.getElementById('button');
button.onclick = function(){
do_something();
}

<a onclick="yourJSFunction();return false" href="images/someImage.jpg" title="My Image" rel="gb_page_center[249, 266]">Click Me</a>
You just need to add an onclick attribute to your anchor tag.
Make sure to return false or else the anchor tag will go to the URL like normal.

Related

Activate a href without opening it

I have an API which i need to open to activate, but I don't want that users actually see the link. Does JQuery or Javascript provide a way to solve this?
I just use windows.open(...) to open the link.
As long as the link is between <a></a> tags, the href will always be displayed on hover for browsers. However, you can do it with events like onClick="function(){}", which can be applied on any kinds of elements, like div.
If you want to hide the href but still want it to redirect when clicked, use this.
Get the URL and put it in data attribute. Then remove the href attribute.
$('a').each(function() {
$(this).data('href', $(this).attr('href')).removeAttr('href');
});
When clicked on anchor, get the URL from data attribute and redirect.
$('a').on('click', function() {
window.location.href = $(this).data('href');
});

How to execute onClick and href both in an anchor tag (<a>)

I have a link as follows:
Click me
On clicking the link, it's executing the JavaScript function, but it is not taking me to the href link.
How can I achieve the same?
I think the easiest way to do it is to make your function return true, so that after the function is complete, the anchor tag will behave like it normally does. This way you can also use the target-attribute if you want to use new window:
function myFunction() {
alert("hello");
return true;
}
Click me
I used jQuery, and I hope it's still understandable:
<a href="www.google.com" onClick=someFunction()>Click me </a>
It's executing the JavaScript function, but it is not taking me to the href link.
So one way is to add the redirection after your function:
function someFunction()
{
... Your code ...
window.location.href($(this).attr('href')); // <----- HERE
}
UPDATE AFTER COMMENT:
function someFunction()
{
... Your code ...
window.open($(this).attr('href'), '_blank'); // <----- HERE
}
You could do this a few ways,
<div onclick = "function();">link here </div>
or you could just use onclick on the a itself
link here
You're putting the onclick inside of the tags which is just for text. Place it in the first to use it as an attribute of the tag.
As Esko posted, in the function return true if you want the href to execute as well.
When the click event is attached on an anchor tag, it is handled by browser in a 'special' way.
The .click is not supposed to work with 'a' tags, because the browser does not support "fake clicking" with JavaScript.
I mean, you can't "click" an element with JavaScript. With 'a' tags you can trigger its onClick event, but the link won't change colors (to the visited link color, the default is purple in most browsers).
So it wouldn't make sense to make the "click" event work with 'a' tags since the act of going to the href attribute is not a part of the onClick event, but hardcoded in the browser.
But you can do some customization to an onclick handler so as to refer href link.
Let's have an example for it:
$('a').click(function () {
window.open($(this).attr('href'));
});
Here is the http://jsfiddle.net/4Qku8/ demonstrating the same using jQuery.
For further details, please refer to Stack Overflow question Can I call jQuery's click() to follow an link if I haven't bound an event handler to it with bind or click already?.

stopping the right click and go to link function for a tag

I have a tag like below. The question I have is how do I make this <a/> tag not behave like a link when user right clicks it. Since on a regular click the onclick event will fire and return false I am good with the regular click on the link the issue comes when a user right clicks the mouse and then gets the option like open in new tab or open in new window I have to prevent this from happening. I found out I can use javascript:void(0) in the href to do that but for some reason I cannot change the href as it is used for some other stuff. Is there any even or something that I can use.
<A title="Test1" onclick="javascript:search1('search'); return false;"href="team">search</A>
Thanks
as often, there's no universal solution, every browser do it its way. HTML 5 says form.oncontextmenu event handler should be supported. So this
<script>
document.oncontextmenu=function("alert('dont play with sources');return false");
</script>
should work if you use HTML 5.
you can also remove the javascript word, onclick already waits for js code (as oncontextmenu does).
<a onclick="search1('....

href="javascript:void(0)" vs. advanced disabling of links

I use
href="javascript:void(0)"
to disable the href property and then use onlclick to give functionality to my anchor elements. How can I do this programatically.
A few issues if I may.
I would suggest an unobtrusive approach
I would not use return false. It could have unexpected results. A quick google search will have more info.
Use preventDefault() to remove the default functionality.
https://developer.mozilla.org/en/DOM/event.preventDefault
Edit:
If you're unsure how to control the click event unobtrusively, addEventListener() is what you are after. You can control everything from there, including preventDefault()
https://developer.mozilla.org/en/DOM/element.addEventListener
Not sure what you mean when you say "works in xhtml, but not in javascript."
If you want to disable a link you can just use return false to cancel the default action.
Apple
Update - in context of a function
My Page
My Page
<script>
function myFunction() {
//do all the javascript stuff i want
return false;
}
function myFunction2() {
//do all the javascript stuff i want
}
</script>
Don't put javascript in href. Leave the href alone. Do what you want in onclick, just make sure it returns false (so that default link action isn't executed). And remember that people opening the link in new tab/window won't get your code executed - they'll just open the link under href.
If it doesn't make sense to have a href at all, you can also have onclick on any other element, not just a.

Where to set link to go when manipulating DOM

When I manipulate the DOM, like adding or removing a div when a user clicks a link, I have the link that initiates the DOM manipulation going to "#". Where should the href parameter point to if I want to page to stay at the page position it is currently at?
You can do:
Click Me
You need to have your click handler return false; this will prevent the browser from following the link.
This should work
Not really a link!
fixed
put in your link
My Link
If you want to do a javascript call, you can put in any js before the return false
The function that gets called on click should return FALSE to stop the anchor from following through.
<script>
function onClick() {
// do click work
return false;
}
</script>
<a href='#' onclick='javascript:onClick'>Click Me</a>

Categories