html - Can I tell anything about a hyperlink that was clicked in JavaScript? - Stack Overflow

admin管理员组

文章数量:1332889

If I have code like this:

<script>
function determine()
{
    // ????
}
</script>

<a href="blah1" onclick="determine()">blah1</a>
<a href="blah2" onclick="determine()">blah2</a>

Is there a way in determine() to see which link was clicked?

(Yes, I know, the easy and correct thing to do would be to pass this to determine(), but in this case that's not going to be easy to do because of legacy code issues.)

EDIT: I probably should have mentioned this at the beginning...our site is not currently using (and cannot use, for the time being) jQuery, so jQuery answers (while valuable in general for this type of question) won't actually help me.

If I have code like this:

<script>
function determine()
{
    // ????
}
</script>

<a href="blah1" onclick="determine()">blah1</a>
<a href="blah2" onclick="determine()">blah2</a>

Is there a way in determine() to see which link was clicked?

(Yes, I know, the easy and correct thing to do would be to pass this to determine(), but in this case that's not going to be easy to do because of legacy code issues.)

EDIT: I probably should have mentioned this at the beginning...our site is not currently using (and cannot use, for the time being) jQuery, so jQuery answers (while valuable in general for this type of question) won't actually help me.

• javascript
• html
• dom-events

Share Improve this question Follow edited Sep 6, 2022 at 15:09 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jun 1, 2009 at 19:07 BeskaBeska 12.7k1414 gold badges8080 silver badges113113 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 4

Check out this link from quirksmode. You can get the event target.

function doSomething(e) {
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;
}

You can with straight up JavaScript, but I prefer to use something like jQuery:

<a href="blah1">blah1</a>

<script type="text/javascript">
  $('a[href=blah1]').click(function() {
    var link = $(this); // here's your link.
    return false; // acts like the link was not clicked. return true to carry out the click.
  });
</script>

Assuming you are using the $().click() functionality, $(this) will give you the link.

If you cannot change the onclick="determine()" in your HTML, but you can change the determine() function, then I think your best bet is to:

Leave the determine() function blank so it doesn't do anything.

Use javascript (as described by other answers) to add a real click handler to each link, and use the event to determine which link was clicked then execute the desired code.

you could add events to each link like so

links = document.getElementsByTagName('a');

for (link in links) {

   link.onclick = function() {
      alert(this.id);
      determine(); // or some other important code?
   }

}

Another solution:

Add an onclick handler to the document. When a user clicks the link, the click event will "bubble" up to the window, and you will have access to the event to determine which link was clicked.

This might be useful if you only want the code to run for those links that already have onclick="determine()" - you could set the determine() function to set a variable. Then when the user clicks the link, the determine() function runs to set the variable, and when the document click handler runs you could check for the variable - then you will know that the link had onclick="determine()".

Let me know if I can make this a little more plicated for you... :-)

If you can't change the onclick attribute, patch it via JavaScript:

// use a DOMContentLoaded hack or `onload` as fallback
onload = function() {
    var links = document.links;
    for(var i = 0; i < links.length; ++i) {
        // there might be a better way to check which links to modify
        // don't know without further details
        if(/determine\(\)/.test(links[i].onclick))
            links[i].onclick = determine;
    }
};

function determine() {
    // the link is now available as `this`
    alert(this.href);
}

Perhaps an even better solution would be to patch in a global, IE-style event object for standards pliant browsers:

if(document.addEventListener) {
    document.addEventListener('click', function(e) {
        window.event = e;
    }, true);
}

function determine() {
    var src = event.target || event.srcElement;
    alert(src.href);
}

本文标签： htmlCan I tell anything about a hyperlink that was clicked in JavaScriptStack Overflow