9

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

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

有些看起来像这样：

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

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

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

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

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

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

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

4

5 回答 5

12

这里是纯 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.
于 2014-06-14T18:58:08.073 回答
11

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

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

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

或者，您可以this指出 的<a>偶数内部someFunction，如下所示：

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

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

或者，如果这不适合您，我们可以通过以下方式获得更好的体验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);
    });
});
于 2012-04-16T23:32:39.850 回答
2

所以我让它慢了一会儿，我确实想出了一个短期的解决方案……这很老套，我觉得这样做有点脏，但有时你只需要做你必须做的事情，直到你能做你需要做的事情做...无论如何，我在这里为其他可能被支持到类似角落的人发布我丑陋的解决方案...

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

基本上，解决方案是制作一个额外的点击监听器，将 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!***/

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

于 2012-04-19T04:02:12.423 回答
1

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

于 2012-04-16T23:33:54.507 回答
0

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

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

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

于 2012-04-16T23:52:13.530 回答