javascript - innerHTML 在 Chrome 中导致不必要的滚动

Question

我有一个简单的设置:点击图片后，我想要播放 mp3 文件。

根据我记得的大多数来源，建议是创建一个虚拟 span 元素，可以在其中嵌入音频播放器以在单击图像时自动启动。

下面是执行此类操作的函数:

<script language="javascript" type="text/javascript">
  function playSound(soundfile,evt) {
    document.getElementById("dummy").innerHTML = "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
    evt.preventDefault(); // this doesnt do anything
    return false; // neither does this
  }
</script>

图片的 HTML 代码:

<a href="#" onclick="playSound('aud.mp3'); return false;">

我将“虚拟”跨度放置在页面的最底部。单击图像时会播放声音，但令人难以置信的烦人的是页面会自动向下滚动到此 span 元素的位置。

我已经在 IE 和 Firefox 上试过了:没有出现这个问题。只有在最新版本的 Chrome (24.0.1312.56 m) 中才会发生这种情况。我已经在两台电脑上试过了。

有人知道怎么回事吗？你如何摆脱这个烦人的卷轴？

return false; 没有帮助(两者都没有；第二个只是通过 # 属性显示滚动到顶部)。 preventDefault() 也没有。也不会将 href 属性从 # 更改为 javascript:void(0)。

Answer 1

我没有使用虚拟的 span 元素，而是发现在 Javascript 中有一个 play() 方法用于 audio 和 video DOM 元素，所以我重写了代码以避免 Chrome 错误。显然，IE8 或更早版本不支持它，但这是一个值得的权衡。

<audio id="aud">
    <source src="aud.ogg" type="audio/ogg" />
    <source src="aud.mp3" type="audio/mpeg" />
</audio>
<a href="#" onClick="document.getElementById('aud').play(); return false;">
  Link
</a>