Javascript 单击链接时javascript获取href

javascript get href when link clicked

提问by slinkhi

Here is my situation. I have some links throughout a website. Some of them look like this:

这是我的情况。我在整个网站上都有一些链接。其中一些看起来像这样：

<a target="_blank" onclick="someFunction()" href="/somFile.pdf">some file</a>

<a target="_blank" onclick="someFunction()" href="/somFile.pdf">some file</a>

and some look like this:

有些看起来像这样：

<a target="_blank" href="/somFile.pdf">some file</a>

<a target="_blank" href="/somFile.pdf">some file</a>

All of the links should be calling someFunction() when clicked. The ones that have the call in the onclick attribute are legacy content pages. Newer pages have a jQuery click event attached to them like so:

单击时，所有链接都应调用 someFunction()。在 onclick 属性中调用的是旧内容页面。较新的页面附加了一个 jQuery click 事件，如下所示：

$(document).ready(function(){
  $('a[href$=".pdf"]').click(function() {
    someFunction();
  });
});

So here's the thing. I can update someFunction(), but I cannot touch the actual links or that jQuery. What I need is to know the href value of the link clicked. I have tried using the following within someFunction() :

所以这就是事情。我可以更新 someFunction()，但我无法触摸实际链接或那个 jQuery。我需要的是知道点击的链接的 href 值。我尝试在 someFunction() 中使用以下内容：

var ev = window.event;
origEl = ev.target || ev.srcElement;
console.log(origEl.href);

but this does not work. I also tried console.log(window.event)and get nothing, says it is undefined. Any idea what I'm missing here, or is it basically impossible without passing a reference to it when the function is called?

但这不起作用。我也尝试过但console.log(window.event)一无所获，说它是未定义的。知道我在这里缺少什么吗，或者在调用函数时不传递对它的引用基本上是不可能的？

edit: to be clear, I cannot as a short or even medium term solution edit the call to someFunction()in the onclick or in the jQuery code black, so I cannot for instance change them to someFunction(this)or similar. I'm not sure it is possible to get the href from within someFunction() unless I do that though :(

编辑：要清楚，我不能作为短期甚至中期解决方案编辑someFunction()onclick 或 jQuery 代码黑色中的调用，所以我不能例如将它们更改为someFunction(this)或类似的。我不确定是否可以从 someFunction() 中获取 href ，除非我这样做:(

采纳答案by slinkhi

So I let this simmer for a while and I did come up with a short term solution...it's pretty hacky and I feel kinda dirty for doing it but sometimes you just gotta do what you gotta do until you can do what you need to do... anyways, I'm posting my ugly solution here for others who might be backed into a similar corner...

所以我让它慢慢炖了一段时间，我确实想出了一个短期的解决方案......这很棘手，我觉得这样做有点肮脏，但有时你只需要做你必须做的事情，直到你能做你需要做的事情做...无论如何，我在这里发布了我丑陋的解决方案，供其他可能陷入类似困境的人使用...

Keep in mind, the only code I'm allowed to touch in OP is the someFunction() function itself. Also, I can add some extra code in the same place as where it located, which is what I have done...

请记住，我允许在 OP 中接触的唯一代码是 someFunction() 函数本身。另外，我可以在它所在的位置添加一些额外的代码，这就是我所做的......

Basically the solution is to make an additional click listener that puts the href value into a variable exposed to the function, and hen wrap the someFunction() code in a small timeout to make sure the new click function can do its thing..

基本上解决方案是制作一个额外的点击监听器，将 href 值放入一个暴露给函数的变量中，然后在一个小的超时时间内包装 someFunction() 代码，以确保新的点击函数可以做它的事情..

<!-- STUFF I CAN'T TOUCH! (located on-page) -->
<a target="_blank" onclick="someFunction()" href="/somFile.pdf">some file</a>
<a target="_blank" href="/somFile.pdf">some file</a>

<script type='text/javascript'>
$(document).ready(function(){
  $('a[href$=".pdf"]').click(function() {
    someFunction();
  });
});
</script>
<!-- END STUFF I CAN'T TOUCH! -->

/*** STUFF I CAN TOUCH! (located in a script include) ***/
// hackjob!
$(document).ready(function(){
  $('a').click(function() {
    if ($(this).attr('href')) someFunction.href = $(this).attr('href');
  });
});

function someFunction(a) {
  // more hackjob!
  window.setTimeout("console.log(someFunction.href);",200);
}
/*** END STUFF I CAN TOUCH!***/

So anyways, yeah it's ugly, but hopefully it might save someone's arse if they are desperate.

所以无论如何，是的，这很丑陋，但希望如果他们绝望，它可以挽救某人的屁股。

回答by Matt Ball

You don't need anything other than this.hrefinside of the clickcallback.

除了回调this.href内部之外，您不需要任何其他东西click。

$(document).ready(function()
{    
    function someFunction(foo)
    {
        console.log(foo);
    }

    $('a[href$=".pdf"]').click(function()
    {
        someFunction(this.href);
    });
});

Alternately, you can make thispoint to the <a>even inside of someFunction, like so:

或者，您可以this指向 的<a>均匀内部someFunction，如下所示：

$(document).ready(function()
{    
    function someFunction()
    {
        console.log(this.href);
        console.log(event);
    }

    $('a[href$=".pdf"]').click(someFunction);
});

or if that doesn't suit you, we can get fancier with Function.apply:

或者如果这不适合您，我们可以通过以下方式变得更有趣Function.apply：

$(document).ready(function()
{    
    function someFunction(event)
    {
        console.log(this.href);
        console.log(event);
    }

    $('a[href$=".pdf"]').click(function (event)
    {
        someFunction.apply(this, event);
    });
});

回答by Ryan Alexander

Here it is in PURE JavaScript

这是在纯 JavaScript 中

    //assuming links inside of a shared class "link"
    for(var i in document.getElementsByClassName('link')) {
        var link = document.getElementsByClassName('link')[i];

        link.onclick = function(e) { 
            e.preventDefault();

            //using returned e attributes
            window.location = e.srcElement.attributes.href.textContent;     
        } 
    } 

    //tested on Chrome v31 & IE 11
    //not working in Firefox v29
    //to make it work in all browsers use something like:

    if (e.srcElement === undefined){
    //scrElement is undefined in Firefox and textContent is depreciated

      window.location = e.originalTarget.attributes.href.value;
    } else {
      window.location = e.srcElement.attributes.href.textContent;
    }

    //Furthermore; when you setAttribute("key" "value"); 
    //you can access it with the above node link. 
    //So say you want to set an objectId on something     
    //manually and then grab it later; you can use 

    //Chrome & IE
    //srcElement.attributes.objectid.textContent; 

    //Firefox
    //e.originalTarget.attributes.objectid.value;

    //*Note: for some unknown reason the attribute being defined as "objectId" is changed to "objectid" when it's set.

回答by Seabass

Use either this.href, or the more jQuery appropriate $(this).attr('href')to get the value of each of your links.

使用 或者this.href更适合的 jQuery$(this).attr('href')来获取每个链接的值。

回答by Lazerblade

Here ya go. Try this. Adjust accordingly for your needs (I removed the pdf link because one didn't exist in my fiddle).

给你。尝试这个。根据您的需要进行相应调整（我删除了 pdf 链接，因为我的小提琴中不存在）。

EDIT: Tested in FF and Chrome. Let me know if it works for ya.

编辑：在 FF 和 Chrome 中测试。让我知道它是否适合你。

http://jsfiddle.net/lazerblade01/dTVz5/22/

http://jsfiddle.net/lazerblade01/dTVz5/22/