谁能发现我的错误?
我在第37行收到“ TypeError:undefinedItems [i]未定义”。
我注释了第36-38行,但控制台中再也没有出现该错误。这是我为社区大学的测试练习而准备的一章教程。
"use strict";
// declare global variables for setup page
var zIndexCounter;
var pos = [];
var origin;
// perform setup tasks when page first loads
function setUpPage() {
document.querySelector("nav ul li:first-of-type").addEventListener("click", loadSetup, false);
document.querySelector("nav ul li:last-of-type").addEventListener("click", loadDirections, false);
var movableItems = document.querySelectorAll("#room div");
zIndexCounter = movableItems.length + 1;
for (var i = 0; i < movableItems.length; i++) {
movableItems[i].addEventListener("mspointerdown", startDrag, false);
movableItems[i].addEventListener("pointerdown", startDrag, false);
if (movableItems[i].addEventListener) {
movableItems[i].addEventListener("mousedown", startDrag, false);
movableItems[i].addEventListener("touchstart", startDrag, false);
} else if (movableItems[i].attachEvent) {
movableItems[i].attachEvent("onmousedown", startDrag);
}
}
// disable IE10+ interface gestures
movableItems[i].style.msTouchAction = "none";
movableItems[i].style.touchAction = "none";
}
// configure page to display Setup content
function loadSetup() {
document.querySelector("nav ul li:first-of-type").className = "current";
document.querySelector("nav ul li:last-of-type").className = "";
document.getElementById("setup").style.display = "block";
document.getElementById("location").style.display = "none";
location.search = "";
}
// configure page to display Directions content
function loadDirections(string) {
document.querySelector("nav ul li:first-of-type").className = "";
document.querySelector("nav ul li:last-of-type").className = "current";
document.getElementById("setup").style.display = "none";
document.getElementById("location").style.display = "block";
}
// run setUpPage() function when page finishes loading
window.addEventListener("load", setUpPage, false);
// add event listeners and move object
// when user starts dragging
function startDrag(evt) {
// set z-index to move selected element on top of others
this.style.zIndex = zIndexCounter;
// increment z-index counter so next selected element is
// on top of others
zIndexCounter++;
if (evt.type !== "mousedown") {
evt.preventDefault();
this.addEventListener("touchmove", moveDrag, false);
this.addEventListener("mspointermove", moveDrag, false);
this.addEventListener("pointermove", moveDrag, false);
this.addEventListener("touchend", removeTouchListener, false);
this.addEventListener("mspointerup", removeTouchListener, false);
this.addEventListener("pointerup", removeTouchListener, false);
} else {
this.addEventListener("mousemove", moveDrag, false);
this.addEventListener("mouseup", removeDragListener, false);
}
pos = [this.offsetLeft, this.offsetTop];
origin = getCoords(evt);
}
function moveDrag(evt) {
var currentPos = getCoords(evt);
var deltaX = currentPos[0] - origin[0];
var deltaY = currentPos[1] - origin[1];
this.style.left = (pos[0] + deltaX) + "px";
this.style.top = (pos[1] + deltaY) + "px";
}
// identify location of object
function getCoords(evt) {
var coords = [];
if (evt.targetTouches && evt.targetTouches.length) {
var thisTouch = evt.targetTouches[0];
coords[0] = thisTouch.clientX;
coords[1] = thisTouch.clientY;
} else {
coords[0] = evt.clientX;
coords[1] = evt.clientY;
return coords;
}
}
// remove mouse event listeners when dragging ends
function removeDragListener() {
this.removeEventListener("mousemove", moveDrag, false);
this.removeEventListener("mouseup", removeDragListener, false);
}
// remove touch event listeners when dragging ends
function removeTouchListener() {
this.removeEventListener("touchmove", moveDrag, false);
this.removeEventListener("mspointermove", moveDrag, false);
this.removeEventListener("pointermove", moveDrag, false);
this.removeEventListener("touchend", removeTouchListener, false);
this.removeEventListener("mspointerup", removeTouchListener, false);
this.removeEventListener("pointerup", removeTouchListener, false);
}
最佳答案
循环结束后,当movableItems[i]
-不在列表末尾时,您正在访问i == movableItems.length
。
将最后两个访问移入循环:
for (var i = 0; i < movableItems.length; i++) {
movableItems[i].addEventListener("mspointerdown", startDrag, false);
movableItems[i].addEventListener("pointerdown", startDrag, false);
if (movableItems[i].addEventListener) {
movableItems[i].addEventListener("mousedown", startDrag, false);
movableItems[i].addEventListener("touchstart", startDrag, false);
}
else if (movableItems[i].attachEvent) {
movableItems[i].attachEvent("onmousedown", startDrag);
}
// moved the following two lines into the loop
movableItems[i].style.msTouchAction = "none";
movableItems[i].style.touchAction = "none";
}
关于javascript - 谁能发现我的错误?我在第37行收到了“TypeError:movableItems [i]未定义”,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34078803/