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

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

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

Answer 1

我没有使用虚拟span元素，而是发现Javascript中有play()和audio DOM元素的video方法，所以我只是重写了避免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事件无关。

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

2 个答案: