为什么我总是得到“无法调用 null 的方法'addEventListener'”
Why do I keep getting "Cannot call method 'addEventListener' of null"?
我在webdev方面非常缺乏经验,但在这里我正在制作一个网站。我使用 Fabric.js 和来自 stackoverflow 的答案的脚本,以便用户可以将图像从一个div 拖到画布中。当我测试它时,我总是收到错误"无法调用 null 的方法'addEventListener'"。我想这意味着脚本尝试加载的任何内容都没有加载,因此将其保留为空。控制台说它来自我的JS文件中的第77行(canvasContainer.addEventListener('dragenter'...,靠近底部)。我尝试将导入脚本代码向下移动(在正文下方),以便它在所有其他内容之后加载,但仍然不起作用。有什么想法吗?
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.");
}
});
相关文章:
- 数组在递归方法中设置为null
- Meteor方法在客户端返回null,在客户端运行的相同方法返回正确的值
- Jquery ajax方法请求体为null,但poster工作正常
- 未捕获的类型错误:无法调用方法'shift'Chrome中的Facebook JS库为null
- 使用clearInterval方法实现的是将区间变量引用设置为null,而不是
- 有没有一种方法可以判断图像src是否在javascript内部返回null
- 无法调用方法'appendChild'为null
- 若字符串为null,则通过启发式方法无法访问代码,将null赋值给变量
- 即使使用jQuery DOM就绪事件,也无法调用null的方法addEventListener()
- 获取文本框输入的值:未捕获的类型错误:无法调用方法'val'为null
- 为什么我总是得到“无法调用 null 的方法'addEventListener'”
- 解析云代码:“在关系上调用 .query() 时,”无法调用 null 的方法'_toPointer'”
- null 返回 by JavaScript 中的 getElementById 方法
- 这是检查变量是否被定义的最佳方法,而不是 null 并等于 “” 或其他任何内容
- 方法在 AJAX 调用中返回 null
- 未捕获的类型错误: 无法调用 null 的方法“替换”
- 哪种方法代表了 JavaScript 中空对象引用的最佳实践,null 或未定义
- 某些 JSON 字段在命中 MVC 控制器方法时显示为 NULL
- 滚动侧边栏抛出 Javascript 错误“无法调用 null 的方法'偏移量'
- 无法调用 null 的方法“select2”