Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML anchor tag with Javascript onclick event

On using Google I found that they are using onclick events in anchor tags.

In more option in google header part, it looks like normal a tag, but onclicking it doesn't get redirected but opened a menu. Normally when using

<a href='more.php' onclick='show_more_menu()'>More >>></a> 

It usually goes to 'more.php' without firing show_more_menu(), but I have show a menu in that page itself. How to do like google?

like image 642
smartkid Avatar asked Sep 08 '11 12:09

smartkid


People also ask

Can I use onclick in anchor tag?

Using onclick Event: The onclick event attribute works when the user click on the button. When mouse clicked on the button then the button acts like a link and redirect page into the given location. Using button tag inside <a> tag: This method create a button inside anchor tag.

How do you call Onclick in a tag function?

Try onclick function separately it can give you access to execute your function which can be used to open up a new window, for this purpose you first need to create a javascript function there you can define it and in your anchor tag you just need to call your function.

Can we use anchor tag in JavaScript?

Create an anchor <a> element. Create a text node with some text which will display as a link. Append the text node to the anchor <a> element. Set the title and href property of the <a> element.

Can you add onclick to a link?

To set an onClick listener on a link in React:Set the onClick prop on the link. The function you pass to the prop will get called every time the link is clicked.


2 Answers

If your onclick function returns false the default browser behaviour is cancelled. As such:

<a href='http://www.google.com' onclick='return check()'>check</a>  <script type='text/javascript'>  function check() {     return false; }  </script> 

Either way, whether google does it or not isn't of much importance. It's cleaner to bind your onclick functions within javascript - this way you separate your HTML from other code.

like image 111
TJHeuvel Avatar answered Sep 23 '22 07:09

TJHeuvel


You can even try below option:

<a href="javascript:show_more_menu();">More >>></a> 
like image 25
sun2 Avatar answered Sep 24 '22 07:09

sun2