innerHTML 在 Chrome 中导致不需要的滚动答案

【问题标题】：innerHTML causes unwanted scroll in ChromeinnerHTML 在 Chrome 中导致不需要的滚动
【发布时间】：2013-01-30 03:14:11
【问题描述】：

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

【问题讨论】：

尝试使用span 代替anchor 并设置样式
您认为playSound 的evt 参数将来自哪里？我猜你想象浏览器会神奇地将事件作为第二个参数添加到对playSound的调用中？
@torazaburo 老实说，我不知道。这短暂地闪过我的脑海，但我认为preventDefault 甚至不适合做任何人。 @ArunPJohny 我尝试将anchor 更改为span，但同样的事情发生了。 innerHTML 方法的某些内容仍然会导致滚动效果，但我不知道您的意思是否更具体。

标签： javascript innerhtml

【解决方案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>

【讨论】：

天啊，我已经断断续续地搜索了好几个星期。你是男人。这太棒了！非常感谢您发布答案。

【解决方案2】：

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

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

它只是简单地执行一个 0 毫秒的 setTimeout，然后添加 html 代码，这样它就与点击事件解除了关联。

【讨论】：