jQuery UI Slider、HTML5 FullScreen、Google Chrome 和状态栏答案

【问题标题】：jQuery UI Slider, HTML5 FullScreen, Google Chrome and the status barjQuery UI Slider、HTML5 FullScreen、Google Chrome 和状态栏
【发布时间】：2013-04-08 14:05:25
【问题描述】：

所以我有一个 jQuery UI 滑块，我在最新的 Chrome 浏览器上以 HTML5 全屏模式使用它。

当用户单击并拖动滑块句柄时，由于 jQuery UI 将滑块句柄绘制为带有 href="#" 的 <a> 标签，Chrome 在全屏底部的“状态栏”中显示链接 # （就像将鼠标悬停在链接上时一样，浏览器窗口底部会出现一个小状态栏。

这破坏了我的全屏体验。

有没有办法阻止 Chrome 专门针对那个滑块标签或任何带有# 的链接的链接？仍然为其他链接显示此信息会很有用。

如果做不到这一点，是否有办法让 jQuery 将滑块绘制为 <div> 标签而不是 <a> 标签？

最后，（只是因为我很好奇）为什么 jQuery UI 团队的霸主会认为在这种情况下使用<a> 标签比使用<div> 标签更明智？

【问题讨论】：

根据超级用户的this post，你不能关闭它，stackoverflow.com/questions/10010770/… 给出了一个解释为什么滑块是<a>

标签： jquery google-chrome slider

【解决方案1】：

如果您在页面加载时从锚标记中删除 href，则 Chrome（或任何浏览器可能）中的状态栏将不会出现。

我同意这不是一个很棒的解决方案。

为此，将以下行添加到 $(document).ready() 的末尾，以便在整个页面加载后执行：

$(<* selctor for jQuery UI Slider *> ).removeAttr('href');

我通过这样做选择了元素：

$('.ui-slider-handle').removeAttr('href');

【讨论】：

您的意思是在绘制之后从滑块句柄中删除href？

【解决方案2】：

在使用滑块后，<a> 标记似乎一直处于选中状态。用户完成滑块后，如何检测由您决定，您可以使用jQuery.blur() 取消选择元素，如下所示：

$('#element').blur()

这不是一个完美的解决方案，但我认为这将是你目前能找到的最好的解决方案。

【讨论】：