背景

Question

背景

现代浏览器取消了经典状态栏，而是在窗口底部绘制一个小工具提示，显示悬停/焦点上的链接目标。

以下屏幕截图中说明了这种情况（在我的情况下是不受欢迎的）行为的一个例子：

问题

是否有可移植的方法来禁用这些工具提示？
在我的特殊情况下，我是否遗漏了任何明显的缺点？
我的尝试（见下文）是否是一种合理的方法来实现这一目标？

推理

我正在开发一个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:support@example.org">Email Support</a></li>
    </ol>
  </body>
</html>

patch()用#元素替换包含span的所有链接（即我的情况下的特定于应用程序的操作），在新的选项卡/窗口中打开所有“外部”链接并且似乎没有打破自定义协议处理。

Answer 1

是否有可移植的方法来禁用这些工具提示？

不是，除了上面的例子之外的解决方法。

在我的特殊情况下，我是否遗漏了任何明显的缺点？

你似乎错过了整个情况都很尴尬的事实。如果要让它们看起来像按钮，为什么还要有链接呢？只需使用按钮。对于这个问题，如果你最终还是用跨度切换它们，为什么还要烦恼呢？只需使用跨度。

我的尝试（见下文）是否是一种合理的方法来实现这一目标？

作为一种通用方法并不合理，因为您要从文档中删除这些锚元素，因此任何附加的事件侦听器，expandos等都将丢失。它可能适用于您的具体情况，但更合理的方法是首先不使用链接（见上文）。

如果您仍然决定做这样的事情，至少不要替换a元素。只需摆脱其href属性并设置事件监听器，就像在示例中所做的那样。现在它不再是一个链接，所以它不会出现在状态栏中（但它至少仍然是相同的元素）。

Answer 2

<button onclick="window.open('yoururlhere.html','_self')">your link text here</button>

请注意，这会将ctrl-clicks视为普通点击，并禁用右键单击。我不知道中间点击。

您也可以使用“a”并仅使用onclick替换href，如上面的代码，但是当我尝试时，我的“a：hover”样式停止工作。显然，没有href的“a”被认为是不可移动的，至少在Firefox中是这样。所以我切换到“按钮”和“按钮：悬停”样式，一切都很好。

我理解这个解决方案会被认为是不好的做法，但在某些情况下，例如我制作的网站主要由全屏照片构成，美学胜过原则。

Answer 3

工具提示向用户提供指示，如果点击该链接将获取链接。它是标准浏览器用户体验的一部分，并且将由您网站的用户期望。改变这种期望，因为你认为它不好看可能会导致糟糕的用户体验。只要用户停止悬停在链接标记上，该区域中显示的任何内容都将可见。

我知道任何不告诉我它去向何方的链接对我来说都很可疑。

Answer 4

试试这个

$(this).removeAttr("href");  
$(this).click(function(){}).mouseover(function(){.........}).etc

Answer 5

这就是我用jQuery做的事情：

        //remove status bar notification...
        $('a[href]').each(function(){
            u = $(this).attr('href');
            $(this).removeAttr('href').data('href',u).click(function(){
                self.location.href=$(this).data('href');
            });
        });

禁用浏览器状态栏文本

背景

问题

推理

我的尝试

5 个答案: