13

背景

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

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

http://i.imgur.com/0dAxc.png

问题

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

推理

我正在开发一个 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链接，使所有“外部”链接在新选项卡/窗口中打开，并且似乎不会破坏自定义协议处理。

4

5 回答 5

4

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

不，除了像上面的例子这样的解决方法。

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

你似乎忽略了整个情况很尴尬的事实。如果你想让它们看起来像按钮，为什么还要有链接呢？只需使用按钮。就此而言，如果您最终还是用跨度将它们切换出来，为什么还要打扰它们呢？只需使用跨度。

我的尝试（见下文）是实现这一目标的合理方式吗？

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

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

于 2012-05-06T05:06:22.643 回答
3 
<button onclick="window.open('yoururlhere.html','_self')">your link text here</button>

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

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

我知道这种解决方案将被视为不好的做法，但在某些情况下，例如我制作的网站主要由全屏照片组成，美学胜过原则。

于 2012-11-09T06:53:55.883 回答
1

工具提示向用户提供了一个指示，如果单击，链接会将他们带到哪里。这是标准浏览器用户体验的一部分，也是您网站用户所期望的。因为你认为它看起来不好看而改变这种期望可能会导致糟糕的用户体验。一旦用户停止将鼠标悬停在链接标签上，该区域中显示的任何内容都将可见。

我知道任何没有告诉我它要去哪里的链接对我来说都很可疑。

于 2012-05-06T04:42:44.597 回答
1

试试这个 

$(this).removeAttr("href");  
$(this).click(function(){}).mouseover(function(){.........}).etc
于 2012-10-01T22:43:10.910 回答
1

这就是我对 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');
            });
        });
于 2013-09-20T11:12:10.543 回答