Javascript:Eventhandler无法运行,可以在JSFiddle中运行

Question

Javascript:Eventhandler无法运行,可以在JSFiddle中运行

Mic*_*son 2 javascript event-handling jsfiddle

所以这是我发布的另一个问题的答案,我认为这是正确的解决方案.然而,虽然它在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>

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Aru*_*hny 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，3 月前
查看次数：	137 次
最近记录：	13 年，3 月前