为什么为什么不断收到“无法调用null的方法'addEventListener'”？

Question

I'm am VERY inexperienced in webdev, but here i am making a website. 我对webdev非常缺乏经验，但是在这里我正在制作一个网站。 Im using Fabric.js and a script from an answer from stackoverflow so that the user can drag an image from one div into a canvas. 我使用了Fabric.js和来自stackoverflow的答案中的脚本，以便用户可以将图像从一个div拖动到画布中。 When i test it out i always get the error "Cannot call method 'addEventListener' of null". 当我对其进行测试时，我总是收到错误“无法调用null的方法'addEventListener'”。 I guess it means that what ever the script is trying to load, it hasn't loaded thus leaving it as null. 我想这意味着无论脚本尝试加载什么，都没有加载，因此将其保留为null。 The console says its from line 77 (canvasContainer.addEventListener('dragenter'..., near the bottom) in my JS file. I've tried moving the import script code lower down (under body) so that it loads after everything else but it still doesn't work. Any ideas? 控制台从我的JS文件中的第77行（canvasContainer.addEventListener（'dragenter'...，靠近底部）说出它的位置。但还是不行，有什么想法吗？

PS. PS。 the the javascript comes from natchiketa. JavaScript来自natchiketa。

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

It looks like you just need to wrap part of the code in a document.ready handler, like this... 看起来您只需要将部分代码包装在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") would not have returned an element as the document was not loaded at that time, but the next few lines expect there to be something there. document.getElementById("CanvasDiv")不会返回任何元素，因为当时尚未加载文档，但是接下来的几行期望那里会有东西。 Wrapping it in a document.ready event handler should resolve that issue as the DOM will be loaded by the time you try to reference it. 将其包装在document.ready事件处理程序中应该可以解决该问题，因为在您尝试引用它时将加载DOM。

Answer 2

you can't get the element until the document is loaded... 在加载文档之前，您无法获取元素...

   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