我正在尝试使用 Javascript 来完成以下任务：
- 页面加载时显示图像。该图像是没有识别标题的身体部位图片，因此在下面的示例代码中称为“Wk1_2_Medial_Border_uncaptioned.jpg”
- 当您将鼠标悬停在它上面时，会出现第二张相同且带有标题的图片。在下面的代码中，它被称为“Wk1_2_Medial_Border_captioned.jpg”。
- 当您单击图像之外的网页上的任何位置时，它会恢复为无标题的图片。
- 当您在图像内部单击时，它会加载带标题的图片。
在计算机上，您显然无法在不将鼠标移出的情况下单击图像外部，因此步骤 3 和 4 可能看起来是多余的。第 3 步和第 4 步的目的是让页面在 Iphone 和 Ipad 上正常工作。当我在 body 标签或 image 标签中没有 onmousedown 事件时，它在计算机和 Android 平板电脑上运行良好。
平板电脑似乎将页面上的点击注册为 mousedown 和 mouseover 事件。看起来我的代码正在做的是这样的：
Uncaptioned图像加载。用户点击图像。
正在触发图像的
onmousedown事件，显示带标题的图像。身体的
onmousedown事件几乎是立即触发的，显示出没有字幕的图像。
我难住了。我不希望正文中的 onmousedown 事件触发，或者我想要某种方式让图像的 onmousedown 事件撤消它。但我不知道怎么做。
这是我的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link style="text/css" rel="stylesheet" href="../ptwebsite.css" >
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script>
function toggleCaption(picture)
{
var pic = document.getElementById("bodyPartPic");
pic.src = picture;
}
</script>
<title>Name The Body Part</title>
</head>
<body onmousedown="toggleCaption('images/Wk 1_1_Spine_of_Scapula_uncaptioned.jpg')">
<div class="maincontent">
<ul id="navbar">
<li><a href="../main.html">Return to Main</a></li>
<li><a href="bodypart1002.php">Next</a></li>
</ul>
<h1 id="welcomebanner">Can You Name The Body Part?</h1>
<h3>Roll your mouse over the image to see the name</h3>
<img id="bodyPartPic" class="portraitImage"
src="images/Wk 1_1_Spine_of_Scapula_uncaptioned.jpg"
onmouseover="toggleCaption('images/Wk 1_1_Spine_of_Scapula_captioned.jpg')"
onmouseout="toggleCaption('images/Wk 1_1_Spine_of_Scapula_uncaptioned.jpg')"
onmousedown="toggleCaption('images/Wk 1_1_Spine_of_Scapula_captioned.jpg')"
/>
</div>
</body>
</html>