Question

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

我已经在正文中尝试了onLoad，Window.onload在函数的标题包围中，并在所有元素加载后在页面底部单独调用它。什么都行不通。

我总是遇到这个问题：

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

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

我知道在这里张贴这篇文章可能有点过头了，但是我把头发拉了出来。

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

<!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调用来测试它。

Answer 1

var link_container = document.getElementById('links');需要在document.onload执行，因此必须在myFunction

内

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

<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>

Answer 2

它不起作用的原因是你在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); 
}

Javascript：Eventhandler无法运行，可以在JSFiddle中运行

2 个答案: