所以我正在编写一个由 iPad 上的 UIWebView 在本地加载的 html 文件。页面中的每个图像都有一个“touchend”事件处理程序，它几乎将图像的 src 更改为另一个图像文件。当我这样做时， $(glovesImage).attr("src","gloves.png"); 在事件内部，出于某种原因，它任意更改其位置和任何其他图像的位置HTML 树中它下面的元素。这有什么原因吗？
<html>
<head>
<title>Index</title>
</head>
<body>
<img id="backgroundImage" alt="" src="image445.jpg" />
<img id="lockerImage" alt="" src="locker.png" />
<img id="guyImage" alt="" src="guy.png" />
<img id="capImage" alt="" src="cap.png" />
<img id="maskImage" alt="" src="mask.png" />
<img id="shieldImage" alt="" src="shield.png" />
<img id="glovesImage" alt="" src="foldedGloves.png" />
<img id="bootsImage" alt="" src="foldedBoots.png" />
<img id="underGownImage" alt="" src="foldedUnderGown.png"/>
<img id="gownImage" alt="" src="gown.png" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var guyImage;
var capImage;
var maskImage;
var shieldImage;
var gownImage;
var underGownImage;
var glovesImage;
var bootsImage;
var originalCapImageLocationX = 580;
var originalCapImageLocationY = 80;
var originalMaskImageLocationX = 720;
var originalMaskImageLocationY = 80;
var originalShieldImageLocationX = 650;
var originalShieldImageLocationY = 70;
var originalGownImageLocationX = 750;
var originalGownImageLocationY = 300;
var originalUnderGownImageLocationX = 600;
var originalUnderGownImageLocationY = 200;
var originalGlovesImageLocationX = 560;
var originalGlovesImageLocationY = 400;
var originalBootsImageLocationX = 620;
var originalBootsImageLocationY = 400;
var originalGuyImageLocationX = 150;
var originalGuyImageLocationY = 0;
$(document).ready(function () {
//Position the background and locker in the right positions
var backgroundImage = $("#backgroundImage");
backgroundImage.offset({ left:0, top:0});
var lockerImage = $("#lockerImage");
lockerImage.offset({left:$(document).width() - lockerImage.width(), top:0});
//Prevent the webview from scrolling
document.body.addEventListener("touchmove", function (event) {
event.preventDefault();
}, false);
//Get referneces of the images in html
guyImage = $("#guyImage");
capImage = document.getElementById("capImage");
maskImage = document.getElementById("maskImage");
shieldImage = document.getElementById("shieldImage");
gownImage = document.getElementById("gownImage");
glovesImage = document.getElementById("glovesImage");
bootsImage = document.getElementById("bootsImage");
underGownImage = document.getElementById("underGownImage");
//Add the drag event listeners to the images
capImage.addEventListener("touchmove", function (event) {
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
moveImageCenterTo(touch.pageX, touch.pageY, $(capImage));
}
}, false);
maskImage.addEventListener("touchmove", function (event) {
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
moveImageCenterTo(touch.pageX, touch.pageY, $(maskImage));
}
}, false);
shieldImage.addEventListener("touchmove", function (event) {
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
moveImageCenterTo(touch.pageX, touch.pageY, $(shieldImage));
}
}, false);
gownImage.addEventListener("touchmove", function (event) {
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
moveImageCenterTo(touch.pageX, touch.pageY, $(gownImage));
}
}, false);
underGownImage.addEventListener("touchmove", function (event) {
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
moveImageCenterTo(touch.pageX, touch.pageY, $(underGownImage));
}
}, false);
glovesImage.addEventListener("touchmove", function (event) {
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
moveImageCenterTo(touch.pageX, touch.pageY, $(glovesImage));
}
}, false);
bootsImage.addEventListener("touchmove", function (event) {
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
moveImageCenterTo(touch.pageX, touch.pageY, $(bootsImage));
}
}, false);
//Add the finger up events to the images
capImage.addEventListener("touchend", function (event) {
if (event.changedTouches.length == 1) {
var x = getCenterLocationX($(capImage));
var y = getCenterLocationY($(capImage));
if (isWithinGuysHead(x, y)) {
moveImageToLocation(getGuysHeadLeft() - 8, getGuysHeadTop(), $(capImage));
} else {
moveImageCenterTo(originalCapImageLocationX, originalCapImageLocationY, $(capImage));
}
}
}, false);
shieldImage.addEventListener("touchend", function (event) {
if (event.changedTouches.length == 1) {
var x = getCenterLocationX($(shieldImage));
var y = getCenterLocationY($(shieldImage));
if (isWithinGuysHead(x, y)) {
moveImageToLocation(getGuysHeadLeft() - 10, getGuysHeadTop() - 20 + (getGuysHeadBottom() / 2), $(shieldImage));
} else {
moveImageCenterTo(originalShieldImageLocationX, originalShieldImageLocationY, $(shieldImage));
}
}
}, false);
maskImage.addEventListener("touchend", function (event) {
if (event.changedTouches.length == 1) {
var x = getCenterLocationX($(maskImage));
var y = getCenterLocationY($(maskImage));
if (isWithinGuysHead(x, y)) {
moveImageToLocation(getGuysHeadLeft() - 5, getGuysHeadTop() - 5 + (getGuysHeadBottom() / 2), $(maskImage));
} else {
moveImageCenterTo(originalMaskImageLocationX, originalMaskImageLocationY, $(maskImage));
}
}
}, false);
gownImage.addEventListener("touchend", function (event) {
if (event.changedTouches.length == 1) {
var x = getCenterLocationX($(gownImage));
var y = getCenterLocationY($(gownImage));
if (isWithinGuysBody(x, y)) {
moveImageToLocation(getGuysXLocation() + 5, getGuysHeadBottom() - 8, $(gownImage));
} else {
moveImageCenterTo(originalGownImageLocationX, originalGownImageLocationY, $(gownImage));
}
}
}, false);
underGownImage.addEventListener("touchend", function (event) {
if (event.changedTouches.length == 1) {
var x = getCenterLocationX($(underGownImage));
var y = getCenterLocationY($(underGownImage));
if (isWithinGuysBody(x, y)) {
$(underGownImage).attr("src", "underGown.png");
moveImageToLocation(getGuysXLocation() + 25, getGuysHeadBottom() - 8, $(underGownImage));
} else {
$(underGownImage).attr("src","foldedUnderGown.png");
moveImageCenterTo(originalUnderGownImageLocationX, originalUnderGownImageLocationY, $(underGownImage));
}
}
}, false);
glovesImage.addEventListener("touchend", function (event) {
if (event.changedTouches.length == 1) {
var x = getCenterLocationX($(glovesImage));
var y = getCenterLocationY($(glovesImage));
if (isWithinAnyGuysHand(x, y)) {
$(glovesImage).attr("src","gloves.png");
moveImageToLocation(getGuysXLocation(), getGuysHandsTopEdge() - 28, $(glovesImage));
} else {
$(glovesImage).attr("src","foldedGloves.png");
moveImageCenterTo(originalGlovesImageLocationX, originalGlovesImageLocationY, $(glovesImage));
}
}
}, false);
bootsImage.addEventListener("touchend", function (event) {
if (event.changedTouches.length == 1) {
var x = getCenterLocationX($(bootsImage));
var y = getCenterLocationY($(bootsImage));
if (isWithinGuysFeet(x, y)) {
$(bootsImage).attr("src","boots.png");
moveImageToLocation(getGuysFeetLeftEdge() + 5, getGuysFeetTopEdge() - 5, $(bootsImage));
} else {
$(bootsImage).attr("src","foldedBoots.png");
moveImageCenterTo(originalBootsImageLocationX, originalBootsImageLocationY, $(bootsImage));
}
}
}, false);
//Move the images to their original locations
moveImageCenterTo(originalCapImageLocationX, originalCapImageLocationY, $(capImage));
moveImageCenterTo(originalMaskImageLocationX, originalMaskImageLocationY, $(maskImage));
moveImageCenterTo(originalShieldImageLocationX, originalShieldImageLocationY, $(shieldImage));
moveImageCenterTo(originalGownImageLocationX, originalGownImageLocationY, $(gownImage));
moveImageCenterTo(originalUnderGownImageLocationX, originalUnderGownImageLocationY, $(underGownImage));
moveImageCenterTo(originalGlovesImageLocationX, originalGlovesImageLocationY, $(glovesImage));
moveImageCenterTo(originalBootsImageLocationX, originalBootsImageLocationY, $(bootsImage));
moveImageToLocation(originalGuyImageLocationX, originalGuyImageLocationY, $(guyImage));
});
</script>
我刚刚发布了相关代码。提前致谢:-)
最佳答案
所以问题最终出现在 css 中。默认情况下，每个项目的位置都是“静态”的，所以我所做的就是将其更改为“绝对”，这样当图像的 src 发生变化并因此改变其宽度和高度时，它不会弄乱另一个的位置元素。
关于javascript - 在 iPad 上从 "src"事件更改图像元素的 "touchend"？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8160242/