javascript - jQuery .click() 导致页面滚动

Question

我在我的站点上创建了几个 jPlayer 实例。每个实例都必须通过 iframe 标签加载，并且同一时间只能播放一个实例。每个 iframe 都有 ID，例如:"iframe_1"、"iframe_2" 等。

在 js 文件中我创建了这样的函数:

$( ".jp-playlist").click(function() {
    //some code                  
    window.parent.$('iframe_'+playingNow).contents().find(".jp-stop").click();

});
$( ".jp-play").click(function() {
    //some code                  
    window.parent.$('iframe_'+playingNow).contents().find(".jp-stop").click();

});

当我单击附加到类 ".jp-play" 或 ".jp-playlist" 的任何元素时，整个页面将滚动到触发元素的顶部。

有人可以帮我找到一种替代方法来停止所有玩家，只播放一个玩家，或者只是帮助解决滚动问题吗？

Answer 1

您可以使用 event.preventDefault()以防止点击元素的默认操作。

$( ".jp-playlist, .jp-play").click(function(e) {
    //some code   
    e.preventDefault();               
    window.parent.$('iframe_'+playingNow).contents().find(".jp-stop").click();

});

如果你点击的元素是href属性设置为#的链接(a元素)，会导致页面滚动到顶部。将 href 更改为 javascript:void(0) 或等效的 javascript:;。

<div style="margin-top: 500px;"></div>
<a href="javascript:;">Clicking here will not scroll to the top of the page</a><br/>
<a href="#">Click here to scroll to the top of the page</a>