2

これは私が投稿した別の質問に対する答えであり、正しい解決策だと思います。ただし、jsfiddleでは正常に機能しますが、その環境以外では機能しません。複数の組み合わせを試しましたが、これを正しく機能させることができません。

関数をラップするヘッダーと、すべての要素が読み込まれた後にページのベースで個別に呼び出すことの両方でonLoad、本文で試しました。Window.onload何も機能しません。

私はいつもこの問題を抱えています：

Uncaught 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れます。左側のパネルのフィドル>2番目の選択ボックスを選択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がロードされた後）、問題が修正されるはずです。

関数内にdeclarelink_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 に答える