event.preventDefault()对链接无效，地图点击播放音频时链接仍跳转

嘿，我一眼就揪出问题根源啦！你的event.preventDefault()没生效，核心原因是JavaScript代码根本没有被正确加载执行！

先看你HTML里的这行代码：

<link src="javascript.js" />

link标签是用来加载CSS样式表的，加载JavaScript必须用<script>标签啊！这就导致你的事件监听器完全没绑定到那些点位链接上，点击的时候自然会触发默认的跳转行为，preventDefault()根本没机会运行～

下面给你一步步解决所有问题：

1. 修复JS的引入方式 #

把错误的link标签改成正确的<script>标签，而且最好把它放在</body>闭合标签之前，这样能确保页面DOM元素都加载完成后再执行JS，避免找不到.mapOverlay a元素的问题：

<!DOCTYPE html>
<html>
<head>
 <title>World Map</title>
 <link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
 <div id="WorldMap">
 <div class="mapOverlay">
 <a class="point1" href="https://upload.wikimedia.org/wikipedia/en/6/61/I_Have_A_Dream_sample.ogg"></a>
 <a class="point2" href="https://upload.wikimedia.org/wikipedia/en/3/3d/7_sample.ogg"></a>
 <a class="point3" href="sounds/test.ogg"></a>
 </div>
 </div>
 <!-- 把JS放在这里，确保DOM已加载 -->
 <script src="javascript.js"></script>
</body>
</html>

2. 修复CSS的小bug #

你的CSS里.point3的left和top属性没加单位（比如px），这会导致这个黄色点位无法正确显示在地图上，赶紧补上：

.mapOverlay a.point3 {
 left: 300px;
 top: 400px;
 background-color: yellow;
}

3. 可选：优化JS代码（更现代更健壮） #

你的JS逻辑本身没问题，但可以改成更现代的写法，还能解决一个潜在的小问题：当href是相对路径时，audioPlayer.src会变成绝对URL，直接全等比较可能失效。这里用includes来判断，同时把var换成const，用forEach循环更清晰：

// 获取所有地图点位链接
const markers = document.querySelectorAll('.mapOverlay a');
// 创建音频播放器实例
const audioPlayer = new Audio();

// 给每个点位绑定点击事件
markers.forEach(marker => {
 marker.addEventListener('click', function(event) {
 // 阻止链接跳转默认行为
 event.preventDefault();
 // 获取音频地址
 const audioSrc = this.getAttribute("href");
 // 如果当前正在播放这个音频，就暂停并重置播放位置
 if (!audioPlayer.paused && audioPlayer.src.includes(audioSrc)) {
 audioPlayer.pause();
 audioPlayer.currentTime = 0; // 可选：点击同一点位时重置到开头
 return;
 }
 // 设置新的音频源并播放
 audioPlayer.src = audioSrc;
 audioPlayer.play();
 });
});

为什么代码片段里能正常运行？ #

因为在代码片段的环境中，JS是被直接注入到页面执行的，不需要通过<script>标签引入，所以你的事件监听器能正常绑定，preventDefault()也就生效了。但在本地环境中，JS没加载，所以才会出现跳转的问题～

内容的提问来源于stack exchange，提问作者giorgi