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

【问题标题】：How can I stop the browser viewport moving to the top of the page when the user clicks on a jQueryUI radio button?当用户单击 jQueryUI 单选按钮时，如何阻止浏览器视口移动到页面顶部？
【发布时间】：2019-07-23 20:46:03
【问题描述】：

我有一些这样的单选按钮设置：

<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>

这些按钮可以工作，但每当我单击一个按钮时，浏览器视口就会返回到页面顶部，就像单击 <a href="#">link</a> 链接时发生的情况一样。

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

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

【问题讨论】：

当您隐藏单选按钮时，它会将它们从屏幕移到页面顶部。这就是为什么浏览器在选择一个时会跳到顶部的原因。尝试添加 position:relative to your div 'typeRadios' - 这会将它们本地化到屏幕的该区域。

标签： javascript jquery jquery-ui

【解决方案1】：

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

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

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

或类似的问题是top : -10000px ;。

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

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

希望这会有所帮助。

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

【讨论】：

【解决方案2】：

我尝试重新创建问题，但失败了。我已经在 FireFox 3.6.13、Google chrome 8.0 和 Internet Explorer 8 中检查过了。

您能否提供更多详细信息以重新创建问题或可能是测试 html 页面？

您是否有单选按钮的点击事件。如果您的事件处理程序上有一个，您可以停止事件的传播并尝试一次。

function clickhandler(ev){
    ev.stopPropagation();
    ev.preventDefault();
    //Your code here
}

但是这里给出的任何代码都没有暗示任何可能导致这种行为的东西。如果您有测试页面，请更新帖子。

【讨论】：

感谢您的回答。我已经尝试过你的建议，但它不起作用。我在第一个单击处理程序行上放了一个断点 - $("form input:radio").click(function(e){ - 当断点被击中时，视口已经移动。我不确定这意味着什么? 回家后我会尝试设置一个测试 html 页面。再次感谢您的帮助。

【解决方案3】：

不要使用 href="#"，而是使用 href="#add" 或任何其他相关文本。这样就可以解决跳转到页面顶部的问题了。

【讨论】：

【解决方案4】：

问题是当您单击单选按钮的标签时，该按钮会自动获得焦点。不要使用像top:-100000000px 和left:-100000000px 这样的位置属性。

我认为您只需将输入文本的可见性属性设置为隐藏即可。

input[type="radio"]{visibility:hidden;}

【讨论】：

对我来说就是这样。
visibility:hidden 对于可访问性不是很好，请参阅类似问题的答案：stackoverflow.com/a/49452792/87861

【解决方案5】：

看起来您需要处理一次点击，并将return false; 放在处理程序的末尾。或者可能更好地使用以下方法防止事件冒泡：

...
ev.preventDefault();
ev.stopPropagation();

其中 ev - 是一个事件对象

【讨论】：

我会劝阻 return false; 并坚持使用 preventDefault() 和/或 stopPropagation()
@gbakernet，同意。如果调用因异常而失败，它不会阻止事件冒泡。

【解决方案6】：

以下点击处理程序可以防止这种情况发生

function(e){
  e.preventDefault();
  ... your code
}

【讨论】：

【解决方案7】：

我遇到了同样的问题

FF-only quick fix（参考您的代码）将是

$("div#typeRadios input[type='radio']").hide();

FF 和 IE 的解决方案

罪魁祸首是主样式表中的 CSS 规则：

input[type="radio"]{position:relative;top:3px;}

与 jQueryUI .ui-helper-hidden-accessible 类冲突

我必须使这条规则更具体，仅限于用于数据提交的“真实”表单

form dl.zend_form input[type="radio"]{position:relative;top:3px;}

【讨论】：

【解决方案8】：

我遇到过使用空锚链接 href="#" 会导致此类视口跳转的情况（尤其是在 chrome 中的 iframe 中使用时）。尝试将其替换为 href="javascript:void(0)"

【讨论】：

【解决方案9】：

这不是 jquery UI 的行为，如 http://www.jsfiddle.net/gaby/3Wz3A/ 所示

很可能是您添加到这些按钮的其他代码。

当您单击这些单选按钮时会发生什么？您隐藏和加载内容或其他内容？

如果您确实将其他一些处理程序附加到这些单选按钮，请显示该代码，因为它很可能是罪魁祸首..

【讨论】：

【解决方案10】：

类似于 Christos 的解决方案，要覆盖样式表，请使用

top: auto;

在一个 Wordpress 错误报告中找到它：http://core.trac.wordpress.org/ticket/23684 这个想法是没有必要将“left”和“top”都设置为大负数。

注意讨论点击处理程序或 href 的评论者：jquery-ui 正在为其目的设置处理程序，所以我宁愿不更改它们，然后必须测试可访问性、键盘导航等。样式覆盖解决方案似乎无害.

[编辑 2014/02/03] Wordpress 在 3.8.1 版（或更早版本）中修复了这个问题。这个修复有点酷，负面定位开始了！它被clip: rect(0 0 0 0); border: 0; 取代，这显然是jquery-ui 的方式。见https://core.trac.wordpress.org/changeset/26602

这东西仍然是绝对定位的，所以留在我或克里斯托的固定位置应该没问题。

【讨论】：

【解决方案11】：

我的解决方案是设置"position: relative"

input[type='radio'].ui-helper-hidden-accessible

编辑：无法在 Firefox 上运行...单选按钮变为可见

【讨论】：