Including Both Href and Onclick to HTML ≪A≫ Tag

Including both href and onclick to HTML a tag

You already have what you need, with a minor syntax change:

<a href="www.mysite.com" onclick="return theFunction();">Item</a>

<script type="text/javascript">
    function theFunction () {
        // return true or false, depending on whether you want to allow the `href` property to follow through or not
    }
</script>

The default behavior of the <a> tag's onclick and href properties is to execute the onclick, then follow the href as long as the onclick doesn't return false, canceling the event (or the event hasn't been prevented)

HTML anchor tag with Javascript onclick event

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.

HTML anchor link - href and onclick both?

Just return true instead?

The return value from the onClick code is what determines whether the link's inherent clicked action is processed or not - returning false means that it isn't processed, but if you return true then the browser will proceed to process it after your function returns and go to the proper anchor.

How do i make onClick and href work together?

You can also try to add a click event handler for li and make sure li and anchor tag a takes the same width.

HTML tag a Both href and onclick

return false; doesn't help you because an error triggers before this line of code.

Take a look at your show function call: you pass 'ṕage3' as a third argument, and then you do document.getElementById(hidden2).style.display = .... But you don't have an element with id="ṕage3".

Replace 'ṕage3' with 'Page3', and this should do the trick

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

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;}

<a href='http://www.google.com' onclick="myFunction();" target="google">Click me</a>

<a id="download" href="/tmp/download.mp3">Download link</a>

$("#download").click(function(e){
    e.preventDefault();//this will prevent the link trying to navigate to another page
    var href = $(this).attr("href");//get the href so we can navigate later

    //do the update

    //when update has finished, navigate to the other page
    window.location = href;
});