javascript - 当用户单击 jQueryUI 单选按钮时，如何阻止浏览器视口(viewport)移动到页面顶部？

Question

我有一些单选按钮设置如下:

<div id="typeRadios">
    <input id="note_notetype_note1" name="note[notetype]" type="radio" value="note1" /><label for="note_notetype_note1">note1</label>
    <input id="note_notetype_note2" name="note[notetype]" type="radio" value="note2" /><label for="note_notetype_note2">note2</label>
</div>

我变成了这样的 jQueryUI 按钮:

$("#typeRadios").buttonset();

这是生成的 HTML:

<input type="radio" value="note1" name="note[notetype]" id="note_notetype_note1" class="ui-helper-hidden-accessible">
<label for="note_notetype_note1" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false"><span class="ui-button-text">note1</span></label>
<input type="radio" value="note2" name="note[notetype]" id="note_notetype_note2" class="ui-helper-hidden-accessible">
<label for="note_notetype_note2" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false"><span class="ui-button-text">note2</span></label>

这些按钮有效，但每当我点击其中一个时，浏览器视口(viewport)就会返回到页面顶部，就像你点击 <a href="#">link</a> 时发生的一样。链接。

我正在使用 jQuery 1.4.2 和 jQueryUI 1.8.7。我怎样才能防止这种行为？感谢阅读。

编辑:<a href="#">link</a>部分丢失。

Answer 1

我最近遇到了这个问题，实际上我找到了一个可能对你有帮助的解决方案，这取决于你的 CSS。

基本上，如果您使用以下方法将单选按钮隐藏在页面之外:

input[type="radio"] {
  left : -10000px;
  position: absolute;
  top : -10000px;
}

或者类似的东西是 top : -10000px ; 这就是问题所在。

也就是说，当单选按钮不可避免地被标签点击聚焦时，页面试图通过将浏览器视口(viewport)滚动到单选按钮来使其进入 View 。由于浏览器的最小 scrollTop 值为 0，因此它会滚动到顶部。

如果您只是删除规则 top : -10000px ; 它将解决问题。

希望这对您有所帮助。

附注preventDefault 和 stopPropagation 在这种情况下不起作用的原因(如其他评论中提到的解决方案)是它们不会停止浏览器在单击标签时聚焦表单字段的默认行为。