当用户点击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

我试图重新创建问题，但失败了。我已经在FireFox 3.6.13，Google Chrome 8.0和Internet Explorer 8中检查了这一点。

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

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

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

但是，无论此处给出的任何代码都不会提示会导致此行为的任何事情。如果您有测试页面，请使用该页面更新该帖子。

Answer 2

看起来像你需要处理一个点击，并把return false;放在处理程序的末尾。或者可能是更好的使用，以防止起泡事件：

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

其中EV - 是一个事件对象

Answer 3

下单击处理程序将防止这种

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

Answer 4

我曾经遇到过的情况下使用空锚链接href =“＃”会导致这样的视口跳转（特别是如果在chrome中的iframe中使用）。试着用HREF =取代它“的javascript：无效（0）”

Answer 5

这不是jQuery用户界面的行为，可以在http://www.jsfiddle.net/gaby/3Wz3A/

是，最有可能可以看出，您可以添加一些其他的代码到那些按钮。

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

如果你连接一些其它的处理程序的单选按钮，请表明代码它很可能是罪魁祸首..

Answer 6

我最近遇到这个问题，其实我已经找到了解决方案，它可以帮助你取决于你的CSS。

基本上，如果你正在使用类似隐藏你的单选按钮关闭该页面：

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

或类似的东西它是top : -10000px ;这是问题。

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

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

希望这会有所帮助。

p.s.在此实例中，preventDefault和stopPropagation不起作用的原因在于，在其他注释中提到的解决方案是，它们不会在单击标签时停止浏览器的默认行为以聚焦表单字段。

Answer 7

我有同样的问题

FF-只有速战速决（指你的代码）将是两个FF和IE

罪魁祸首是

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

解决方案主样式表中的CSS规则：

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

与jQueryUI的.ui-helper-hidden-accessible类

发生冲突我不得不做出这个规则更具体限制它只能被用于数据提交

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

Answer 8

而不是使用的href =“＃“真实”的形式“，请使用href =”＃add“或任何其他相关文本。 这将解决跳转到页面顶部。

Answer 9

到克里斯托的解决方案类似，覆盖样式表，使用

top: auto;

在WordPress的bug报告发现：http://core.trac.wordpress.org/ticket/23684的想法是，同时设置“左”，“顶”到大底片应是不必要的。

请注意讨论点击处理程序或href：jquery-ui是为其目的设置处理程序，所以我宁愿不改变它们，然后必须测试可访问性，键盘导航等。无害。

Wordpress在版本3.8.1（或更早）中修复了这个问题。这个修复是一个很酷，消极的定位工具！它被替换为clip: rect(0 0 0 0); border: 0;，这显然是jquery-ui的方式。见https://core.trac.wordpress.org/changeset/26602

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

Answer 10

对我来说，解决办法是设置"position: relative"上

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

编辑：不工作在Firefox ...单选按钮变得可见

Answer 11

的问题是，当你点击标签单选按钮，该按钮自动获得焦点。 请勿使用位置属性，如top:-100000000px和left:-100000000px。

我想你只需要将输入文本的可见性属性设置为隐藏。

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