javascript - Including both href and onclick to HTML <a> tag - Stack Overflow

admin管理员组

文章数量:1133990

If I have this element:

<a href="www.mysite" onClick="javascript.function();">Item</a>

How can I make both href and onClick work, preferably with onClick running first?

If I have this element:

<a href="www.mysite.com" onClick="javascript.function();">Item</a>

How can I make both href and onClick work, preferably with onClick running first?

• javascript
• html
• onclick
• href

Share Improve this question Follow edited Jul 26, 2022 at 8:52 Chris 1,30122 gold badges1717 silver badges3939 bronze badges asked Feb 14, 2013 at 3:56 user1589113user1589113 3

• Check this Set A tag link in HTML using JavaScript – Mohamed Commented Dec 24, 2021 at 14:35
• This one may help, It works for me : stackoverflow.com/a/7347854/14437411 – Menaim Commented Feb 1, 2022 at 22:19
• @Mohamed what is your link about, does it help? – Timo Commented Mar 12, 2024 at 20:51

Add a comment  | 

7 Answers 7

Sorted by: Reset to default 295

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)

Use jQuery. You need to capture the click event and then go on to the website.

$("#myHref").on('click', function() {
  alert("inside onclick");
  window.location = "http://www.google.com";
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="myHref">Click me</a>

To achieve this use following html:

<a href="www.mysite.com" onclick="make(event)">Item</a>

<script>
    function make(e) {
        // ...  your function code
        // e.preventDefault();   // use this to NOT go to href site
    }
</script>

Here is working example.

No jQuery needed.

Some people say using onclick is bad practice...

This example uses pure browser javascript. By default, it appears that the click handler will evaluate before the navigation, so you can cancel the navigation and do your own if you wish.

<a id="myButton" href="http://google.com">Click me!</a>
<script>
    window.addEventListener("load", () => {
        document.querySelector("#myButton").addEventListener("click", e => {
            alert("Clicked!");
            // Can also cancel the event and manually navigate
            // e.preventDefault();
            // window.location = e.target.href;
        });
    });
</script>

Use a <button> instead. In general, you should only use a hyperlink for navigation to a real URL.

We can style a button to look like an anchor element.

From https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#onclick_events

Anchor elements are often abused as fake buttons by setting their href to # or javascript:void(0) to prevent the page from refreshing, then listening for their click events .

These bogus href values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.

Accepted answer didn't work for me. However, preventing the default behavior of a href and then 'manually' following the link, did work.

The code sample would be:

<a href="https://example.com" onClick="myFunction(event)">Link</a>
<script>
function myFunction(event) {
    event.preventDefault();
    // do your thing here
    window.location.href = event.currentTarget.href;
}
</script>

Use ng-click in place of onclick. and its as simple as that:

<a href="www.mysite.com" ng-click="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>

本文标签： javascriptIncluding both href and onclick to HTML ltagt tagStack Overflow