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

我有一个简单的设置：点击一个图像，我想播放一个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>

功能播放声音（声音文件，evt）{
document.getElementById（“dummy”）.innerHTML=“”；
evt.preventDefault（）；//这不起任何作用
return false；//这也不正确
}

图像的HTML代码：

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

我将“虚拟”跨距放在页面的最底部。单击图像时，声音会播放，但令人讨厌的是页面会自动向下滚动到这个span元素的位置

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

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

---

返回false

没有帮助（两者都没有；第二种方法只是通过

#

属性滚动到顶部）。

preventDefault（）

也没有。将a

href

属性从

#

更改为

javascript:void（0）

也没有改变，我发现javascript中有一个

play（）

方法用于

audio

和

video

DOM元素，所以我只是重写了代码以避免Chrome bug。显然，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>

---

好的，我遇到了一个类似的问题，发现了这个问题，但它对我没有帮助，我找到了一个解决方法，所以我决定将它发布在这里，以帮助其他有同样问题的人。 问题是，由于这是对用户单击某个内容的响应，因此浏览器会自动滚动以显示新的html内容。我想出的解决办法是这样的-

setTimeout(function(){
    document.getElementById('dummy').innerHTML += "THE STUFF";
}, 0);

---

它只需执行一个setTimeout 0毫秒，然后追加html代码，这样它就与单击事件无关。

而不是

anchor

元素，尝试一个

span

并设置样式，您认为

playSound

的

evt

参数来自哪里？我猜你会想象浏览器会神奇地将事件添加为调用

playSound

？@torazaburo的第二个参数老实说，我不知道。我一时想到了这一点，但我认为

preventDefault

对任何人来说都不是正确的做法@我试着把

锚

改成

span

，但同样的事情发生了。关于

innerHTML

方法的某些内容仍然会导致滚动效果，但我不知道您的意思是否更具体。天哪，我已经断断续续地搜索了好几个星期了。你就是那个人。这太棒了！非常感谢您发布答案。