innerHTML会导致Chrome中不需要的滚动

Question

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

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

这是执行此类操作的功能：

<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米）中才会发生这种情况。 我在两台电脑上试过这个。

有谁知道怎么了？ 你怎么摆脱这个恼人的卷轴？

return false; 没有帮助（他们都没有;第二个只是通过#属性滚动到顶部）。 preventDefault()也没有。 也没有将a href属性从#更改为javascript:void(0) 。

Answer 1

我发现在Javascript中有一个用于audio和video DOM元素的play()方法，而不是使用虚拟span元素，所以我只是重写代码以避免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>

Answer 2

好的，我遇到了类似的问题并发现了这个，但它没有帮助我，我想出了一个解决方法所以我决定在这里发布它以帮助其他人有同样的问题。 问题是浏览器的数字是因为这是为了响应用户点击某些内容，它应该滚动以自动显示新的html内容。 我想出的解决方法是这样的 -

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

它只是将setTimeout设置为0 ms然后执行html代码的附加，这样它就与click事件无关。