2

所以这是我发布的另一个问题的答案，我认为这是正确的解决方案。然而，虽然它在 jsfiddle 中工作得非常好，但在该环境之外它不起作用。我尝试了多种组合，但我无法让这件事正常工作。

我已经onLoad在正文中尝试过，Window.onload无论是在函数周围的标题中，还是在所有元素加载后在页面底部单独调用它。没有任何效果。

我总是遇到这个问题：

未捕获的 TypeError：无法调用 null 的方法“addEventListener”

这令人沮丧，因为我看到的所有其他针对此错误的解决方案都围绕确保您确实具有处理程序在您的 HTML 中触发的指定 ID。我做的。

我知道在这里发帖可能有点矫枉过正，但我​​正在拔头发。

这是 JSfiddle：http: //jsfiddle.net/fFW5r/1/

这是我为测试这个概念而制作的模型页面（它永远不会起作用）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript"> 
    var link_container = document.getElementById('links');
    function myFunction(){ link_container.addEventListener('click', function(e){ 
        if(e.target.nodeName === "A"){
            var href = e.target.getAttribute('href'),
                selfhost = window.location.hostname;
            if(href.indexOf(selfhost) !== -1){
                alert('Inbound link clicked');
            } else {
                alert('Outbound link clicked');
            }
        }
    }, false); 
    }
</script>
</head>

<body onload="myFunction()">

<div id="links">
    <a href="http://fiddle.jshell.net/#foo">Inbound Link</a>
    <a href="http://stackoverflow.com">Outbout Link</a>
</div>

<script>window.onload=myFunction()</script>
</body>
</html>

onload在加载完所有内容后，我试图通过页面底部的调用来测试这个特定的迭代。

4

2 回答 2

6

var link_container = document.getElementById('links');需要执行document.onload所以它必须在里面myFunction

在 jsfiddle 中，代码load默认执行。在左侧面板的小提琴中>第二个选择框，如果您选择no wrap - in head，您可以重新创建问题。演示：小提琴

<script type="text/javascript"> 

    function myFunction(){ 
        var link_container = document.getElementById('links'); // <<-- Move it inside `myFunction()`
        link_container.addEventListener('click', function(e){ 
        if(e.target.nodeName === "A"){
            var href = e.target.getAttribute('href'),
                selfhost = window.location.hostname;
            if(href.indexOf(selfhost) !== -1){
                alert('Inbound link clicked');
            } else {
                alert('Outbound link clicked');
            }
        }
    }, false); 

    }
</script>
于 2013-03-08T17:44:32.063 回答
0

它不起作用的原因是您在 DOM 准备好之前初始化 link_container 。然后当 myFunction() 运行时，link_container 已经被初始化为 undefined。这导致它失败。在函数中初始化它（在 DOM 加载之后）应该可以解决问题

将 declare link_container 放在函数内。

var link_container = document.getElementById('links');

function myFunction(){ 
    link_container.addEventListener('click', function(e){ 
        if(e.target.nodeName === "A"){
            var href = e.target.getAttribute('href'),
                selfhost = window.location.hostname;
            if(href.indexOf(selfhost) !== -1){
                alert('Inbound link clicked');
            } else {
                alert('Outbound link clicked');
            }
        }
    }, false); 
}
于 2013-03-08T17:47:27.627 回答