![](/img/trans.png)
[英]why i am getting Cannot read property 'addEventListener' of null javascript
[英]Why do I keep getting “Cannot call method 'addEventListener' of null”?
我对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.");
}
看起来您只需要将部分代码包装在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。
在加载文档之前,您无法获取元素...
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.");
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.