Javascript: Eventhandler不工作，在JSFiddle中工作

所以这是我发布的另一个问题的答案，我认为这是正确的解决方案。然而，虽然它在jsfiddle中工作得很好，但在该环境之外却不起任何作用。我已经尝试了多种组合，我不能得到这个东西的工作权利。

我已经尝试了onLoad在身体，Window.onload都在头包裹在函数周围，并在所有元素加载后分别在页面底部调用它。没有作品。

我总是遇到这个问题:

未捕获TypeError: Cannot call method 'addEventListener' of null

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

我知道在这里写这篇文章可能有点小题大做，但我真的要把头发拔出来了。

这是jsfield: 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调用在页面底部的一切加载后。

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>

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

将声明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); 
}

相关内容

最新更新

热门标签：