為什么為什么不斷收到“無法調用null的方法'addEventListener'”？

Question

我對webdev非常缺乏經驗，但是在這里我正在制作一個網站。 我使用了Fabric.js和來自stackoverflow的答案中的腳本，以便用戶可以將圖像從一個div拖動到畫布中。 當我對其進行測試時，我總是收到錯誤“無法調用null的方法'addEventListener'”。 我想這意味着無論腳本嘗試加載什么，都沒有加載，因此將其保留為null。 控制台從我的JS文件中的第77行（canvasContainer.addEventListener（'dragenter'...，靠近底部）說出它的位置。但還是不行，有什么想法嗎？

PS。 JavaScript來自natchiketa。

HTML：

<!doctype html>
<html lang="en";>
<head>
    <meta charset="utf-8" />
    <title>CustomCase</title>
    <link rel="stylesheet" href="SkapaDesign.css">
    <script src="Jquery.js"></script>
    <script src="Modernizr.js"></script>
    <script src="Fabric.js"></script>
    <script src="Canvas.js"></script>
</head>
<body>  
    <div id="Wrapper">  
        <section id="Body">
                <div id="CanvasDiv">
                    <canvas id="Canvas" width="270px" height="519px"></canvas>
                </div>

                <div id="TextureView">
                    <div id="TextureViewInside">
                        <ul class="products">
                            <img draggable="true" src="FärgadePapper.png">
                            <img draggable="true" src="Hajar.png">
                            <img draggable="true" src="Labyrint.png">
                            <img draggable="true" src="Martini.png">
                        </ul>
                    </div>
                </div>  
        </section>
    </div>
</body>
</html>

CSS：

#Body{
    height: 675px;
}
#Canvas, #TextureView{
    float: left;
}
#LeftColumn{
    float: left;
    width: 355px;
    margin: 20px 30px 0px 0px;
}
#RightColumn{
    float: left;
    width: 600px;
    margin-top: 20px;
}
#CanvasDiv{
    width: 270px;
    height: 519px;
    margin-left: 15px;
}
#Canvas{
    overflow: hidden;
}
#TextureView{
    width: 470px;
    height: 559px;
    overflow: auto;
}
#TextureViewInside{
    padding: 10px;
}
ul.products img{
    width: 97px;
    display: inline-block;
    vertical-align: top;
    padding: 4px;
}

JavaScript的：

var canvas = new fabric.Canvas('Canvas');

function handleDragStart(e) {
    [].forEach.call(images, function (img) {
        img.classList.remove('img_dragging');
    });
    this.classList.add('img_dragging');
}

function handleDragOver(e) {
    if (e.preventDefault) {
        e.preventDefault(); 
    }
    e.dataTransfer.dropEffect = 'copy';
    return false;
}

function handleDragEnter(e) {
    this.classList.add('over');
}

function handleDragLeave(e) {
    this.classList.remove('over');
}

function handleDrop(e) {
    if (e.stopPropagation) {
        e.stopPropagation();
    }

    var img = document.querySelector('#images img.img_dragging');

    console.log('event: ', e);

    var newImage = new fabric.Image(img, {
        width: img.width,
        height: img.height,
        left: e.layerX,
        top: e.layerY
    });
    canvas.add(newImage);

    return false;
}

function handleDragEnd(e) {
    [].forEach.call(images, function (img) {
        img.classList.remove('img_dragging');
    });
}

if (Modernizr.draganddrop) {
    var images = document.querySelectorAll('#images img');
    [].forEach.call(images, function (img) {
        img.addEventListener('dragstart', handleDragStart, false);
        img.addEventListener('dragend', handleDragEnd, false);
    });
    var canvasContainer = document.getElementById('CanvasDiv');
    canvasContainer.addEventListener('dragenter', handleDragEnter, false);
    canvasContainer.addEventListener('dragover', handleDragOver, false);
    canvasContainer.addEventListener('dragleave', handleDragLeave, false);
    canvasContainer.addEventListener('drop', handleDrop, false);
} else {
    alert("This browser doesn't support the HTML5 Drag and Drop API.");
}

Answer 1

看起來您只需要將部分代碼包裝在document.ready處理程序中，就像這樣……

$(function() {
    if (Modernizr.draganddrop) {
        var images = document.querySelectorAll('#images img');
        [].forEach.call(images, function (img) {
            img.addEventListener('dragstart', handleDragStart, false);
            img.addEventListener('dragend', handleDragEnd, false);
        });
        var canvasContainer = document.getElementById('CanvasDiv');
        canvasContainer.addEventListener('dragenter', handleDragEnter, false);
        canvasContainer.addEventListener('dragover', handleDragOver, false);
        canvasContainer.addEventListener('dragleave', handleDragLeave, false);
        canvasContainer.addEventListener('drop', handleDrop, false);
    } else {
        alert("This browser doesn't support the HTML5 Drag and Drop API.");
    }
});

document.getElementById("CanvasDiv")不會返回任何元素，因為當時尚未加載文檔，但是接下來的幾行期望那里會有東西。 將其包裝在document.ready事件處理程序中應該可以解決該問題，因為在您嘗試引用它時將加載DOM。

Answer 2

在加載文檔之前，您無法獲取元素...

   window.addEventListener('loaded', function(){
       if (Modernizr.draganddrop) {
           var images = document.querySelectorAll('#images img');
           [].forEach.call(images, function (img) {
               img.addEventListener('dragstart', handleDragStart, false);
               img.addEventListener('dragend', handleDragEnd, false);
           });
           var canvasContainer = document.getElementById('CanvasDiv');
           canvasContainer.addEventListener('dragenter', handleDragEnter, false);
           canvasContainer.addEventListener('dragover', handleDragOver, false);
           canvasContainer.addEventListener('dragleave', handleDragLeave, false);
           canvasContainer.addEventListener('drop', handleDrop, false);
       } else {
           alert("This browser doesn't support the HTML5 Drag and Drop API.");
       }
     });

為什么為什么不斷收到“無法調用null的方法'addEventListener'”？

問題描述

2 個解決方案

解決方案1
1 已采納 2013-11-11 17:56:44

解決方案2
0 2013-11-11 17:58:55

為什么為什么不斷收到“無法調用null的方法&#39;addEventListener&#39;”？

問題描述

2 個解決方案

解決方案1 1 已采納 2013-11-11 17:56:44

解決方案2 0 2013-11-11 17:58:55

為什么為什么不斷收到“無法調用null的方法'addEventListener'”？

解決方案1
1 已采納 2013-11-11 17:56:44

解決方案2
0 2013-11-11 17:58:55