jquery - how to get the caller element in href javascript function? - Stack Overflow

admin管理员组

文章数量:1296461

I have an anchor tag element ing in the html like:

<a href="javascript:handleEvent(this, 'abc')"></a>

Now in the javascript function, I have written:

function handleEvent(sourceElement, txt) {
    console.log(sourceElement);
}

the consoled element is ing as the window in this case. I tried sourceElement.document.activeElement but it doesnt seem to work in chrome, where it is ing as body element.

I cannot change the structure of the anchor tag to 'onClick' function as this is ing from some other source. Is there some way to find the calling element in this scenario?

I have an anchor tag element ing in the html like:

<a href="javascript:handleEvent(this, 'abc')"></a>

Now in the javascript function, I have written:

function handleEvent(sourceElement, txt) {
    console.log(sourceElement);
}

the consoled element is ing as the window in this case. I tried sourceElement.document.activeElement but it doesnt seem to work in chrome, where it is ing as body element.

I cannot change the structure of the anchor tag to 'onClick' function as this is ing from some other source. Is there some way to find the calling element in this scenario?

• javascript
• jquery
• html
• anchor
• href

Share Improve this question Follow asked Feb 3, 2014 at 10:54 Kop4lyfKop4lyf 4,59011 gold badge2727 silver badges3131 bronze badges 2

• possible duplicate of get the event object in an event handling function without pass the event object as parameters? (with jquery) – pwolaq Commented Feb 3, 2014 at 10:59
• 3 @Pawel_W: No, there's a big difference between href="javascript:..." and onclick="...". – T.J. Crowder Commented Feb 3, 2014 at 11:04

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

The real answer here is to change the HTML, which you've said you can't do. I'd push back on that if you can. If you're writing the function, and the function name is in the HTML, how is it you can't change the HTML??

But if you really, really can't, you can update the DOM once it's loaded:

var list = document.querySelectorAll('a[href^="javascript:"]');
var x, link;
for (x = 0; x < list.length; ++x) {
    link = list[x];
    link.onclick = new Function(link.href.substring(11));
    link.href = "javascript:;";
}

Live Copy | Live Source

This is fairly naughty, as it uses the Function constructor (which is very much like eval), but if you trust the source of the HTML, that should be okay.

Or of course, if you don't have to use whatever was in the href to start with, just hook up your event handler in the code above and don't use new Function.

try something like this, use jQuery

just select the link tag with your selector

        $(function(){
            var href = $('a').attr('href');
            href = href.replace('javascript:','');
            $('a').attr('href','#');
            $('a').attr('onclick',href);
        })

This is just workaround solution.

If you have access to the js, you could do something like this:

document.addEventListener('DOMContentLoaded', function(){
    var link = document.querySelectorAll('a');
    link[0].addEventListener('click', function(e){
        console.log(e.target);
    });
});

With this, you would be just not be doing anything with the inline href event and just be appending your own handler.

And if no other answer here works for you because you can't update the DOM after it's loaded (try doing any of them if you want to modify a squarespace lightbox - not saying it's impossible, but...), here's an out of the box thinking:

Sometimes there will be something hinting where the a href is. So you could use it.

<div class="hint current">
    <a href="javascript:handleEvent('.hint')">

In my case, I even knew the hint without needing a parameter, which made things even simpler:

function handleEvent (hint) {
    if(!hint) {
        hint = $("div.current");
    }
    hrefElement = $(hint).find('a[href^=javascript]');
}

This of course will make sense if your DOM is constantly being changed by a script you have no access to.

But even if there is nothing hinting on the a href, you still could do something like this:

<a href="javascript:var x=1;handleEvent(1)">

function handleEvent (uniqueId) {
    hrefElement = $('a[href^=javascript:var x='+uniqueId);
}

本文标签： jqueryhow to get the caller element in href javascript functionStack Overflow