背景
现代浏览器取消了经典的状态栏,而是在窗口底部绘制一个小工具提示,在悬停/焦点时显示链接目标。
下面的屏幕截图说明了这种行为的示例(在我的例子中是不需要的):
问题
- 有没有一种可移植的方法来禁用这些工具提示?
- 在我的特殊情况下,我是否遗漏了这样做的任何明显缺点?
- 我的尝试(见下文)是实现这一目标的合理方法吗?
推理
我正在开发一个 Intranet Web 应用程序,并且希望针对某些特定于应用程序的操作禁用此行为,因为坦率地说,https://server/#
到处看起来都令人眼花缭乱,而且很引人注目,因为在某些情况下,我的应用程序会在该位置绘制自己的状态栏。
我的尝试
我不是一名网络开发人员,因此我在该领域的知识仍然相当有限。
无论如何,这是我对 jQuery 的尝试:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Target Tooltip Test</title>
<style>
a, span.a {
color: #F00;
cursor: pointer;
text-decoration: none;
}
a:hover, span.a:hover {
color: #00F;
}
a:focus, span.a:focus {
color: #00F;
outline: 1px dotted;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
patch();
});
function patch() {
$('a').each(function() {
var $this = $(this).prop('tabindex', 0);
if($this.prop('href').indexOf('#') == -1 || $this.prop('rel').toLowerCase() == 'external') {
return;
}
var $span = $('<span class="a" tabindex="0"></span>');
$span.prop('data-href', $this.prop('href'));
$span.text($this.text());
$this.replaceWith($span);
});
$('a[rel="external"]').click(function() {
window.open($(this).prop('data-href'));
return false;
});
$('span.a').click(function() {
location.href = $(this).prop('data-href');
}).keypress(function(event) {
if(event.keyCode == 13) {
location.href = $(event.target).prop('data-href');
}
}).focus(function() {
window.status = ''; // IE9 fix.
});
}
</script>
</head>
<body>
<ol>
<li><a href="http://google.com" rel="external">External Link</a></li>
<li><a href="#foo">Action Foo</a></li>
<li><a href="#bar">Action Bar</a></li>
<li><a href="#baz">Action Baz</a></li>
<li><a href="mailto:[email protected] /cdn-cgi/l/email-protection">Email Support</a></li>
</ol>
</body>
</html>
patch()
替换所有包含的链接#
(即,在我的例子中,特定于应用程序的操作)span
元素,使所有“外部”链接在新选项卡/窗口中打开,并且似乎不会破坏自定义协议处理。
有没有一种可移植的方法来禁用这些工具提示?
不,除了像上面的例子这样的解决方法。
在我的特殊情况下,我是否遗漏了这样做的任何明显缺点?
你似乎忽略了整个情况很尴尬的事实。如果你想让链接看起来像按钮,为什么还要有链接呢?只需使用按钮即可。就此而言,如果您最终还是用跨度将链接切换掉了,那为什么还要费心去处理链接呢?只需使用跨度即可。
我的尝试(见下文)是实现这一目标的合理方法吗?
作为一般方法,这并不是很合理,因为您要从文档中删除这些锚元素,因此任何附加的事件侦听器、expandos 等都将丢失。它可能适合您的具体情况,但更明智的方法是首先不使用链接(见上文)。
如果你仍然决心做这样的事情,至少不要更换a
元素。只要摆脱它href
属性并设置事件侦听器,就像您在示例中所做的那样。现在它不再是一个链接,因此它不会显示在状态栏中(但至少它仍然是相同的元素)。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)