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

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>

这些按钮有效,但每当我点击一个按钮时,浏览器视口都会返回到页面顶部,就像点击<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 ;问题.

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

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

希望这可以帮助.

ps之所以在这个实例中使用preventDefault和stopPropagation不起作用的原因是在其他注释中提到的解决方案是,当单击标签时,它们不会停止浏览器的默认行为以聚焦表单域.

Answer 2

我试图重新创建这个问题,但失败了.我在FireFox 3.6.13,Google Chrome 8.0和Internet Explorer 8中检查了这个.

您能否提供一些更多细节来重新创建问题或者可能是测试html页面？

您是否有单选按钮的单击事件.如果事件处理程序中有一个,则可以停止事件的传播并尝试一次.

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

但是,这里给出的任何代码都不会暗示任何可能导致此行为的内容.如果您有测试页,请用此更新帖子.

Answer 3

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