Отключение текста строки состояния браузера

Фон

Современные браузеры устраняют классическую строку состояния и вместо этого рисуют небольшую подсказку внизу своих окон, которая отображает цель ссылки при наведении/фокусировке.

Пример этого (нежелательного, в моем случае) поведения показан на следующем снимке экрана:

Вопросы

Существует ли переносимый способ отключения этих всплывающих подсказок?
У меня отсутствуют какие-либо очевидные недостатки для этого в моей конкретной ситуации?
Является ли моя попытка (см. ниже) разумным способом достижения этого?

Рассуждение

Я работаю над веб-приложением в интрасети и хотел бы отключить это поведение для некоторых действий, связанных с конкретными приложениями, потому что, честно говоря, 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="#" onclick="location.href='http://google.com'; return false;" 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]">Email Support</a></li>
    </ol>
  </body>
</html>

patch() заменяет все ссылки, содержащие # (т.е. действия приложения в моем случае) с элементом span, делает все "внешние" ссылки открытыми в новой вкладке/окне и не кажется перерыв в обработке пользовательских протоколов.

Ответ 1

Есть ли переносимый способ отключения этих всплывающих подсказок?

Нет, кроме обходных путей, подобных вашему примеру выше.

У меня отсутствуют какие-либо очевидные недостатки для этого в моей конкретной ситуации?

Вам кажется, что отсутствует тот факт, что вся ситуация неудобна. Почему у вас вообще есть ссылки, если вы собираетесь сделать их похожими на кнопки? Просто используйте кнопки. Если уж на то пошло, зачем беспокоиться о ссылках, если вы в конечном итоге отключите их с пролетами? Просто используйте пробелы.

Является ли моя попытка (см. ниже) разумным способом достижения этого?

Это не очень разумно как общий подход, потому что вы удаляете эти элементы привязки из документа, поэтому любые подключенные прослушиватели событий, расширения и т.д. будут потеряны. Это может работать для вашей конкретной ситуации, но более здравый подход состоял бы в том, чтобы не использовать ссылки в первую очередь (см. Выше).

Если вы все еще решили сделать что-то вроде этого, по крайней мере, не заменяйте элемент a. Просто избавитесь от его атрибута href и настройте прослушиватель событий, как в вашем примере. Теперь это уже не ссылка, поэтому она не будет отображаться в строке состояния (но она по-прежнему остается одним и тем же элементом).

Ответ 2

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

Обратите внимание, что это обрабатывает ctrl-клики как обычные клики и отключает щелчок правой кнопкой мыши. Я не знаю о средних кликах.

Вы также можете использовать "a" и просто заменить href на onclick, как в приведенном выше коде, но когда я попробовал, мой стиль "a: hover" перестает работать. По-видимому, "a" без href считается неотразимым, по крайней мере, в Firefox. Поэтому я переключился на стиль "button" и "button: hover", и все было хорошо.

Я понимаю, что это решение будет считаться плохой практикой, но в некоторых ситуациях, например, на сайте, который я делаю в основном из полноэкранных фотографий, принципы эстетики козырей.

Ответ 3

Всплывающая подсказка служит для указания пользователю, где ссылка будет принимать их при нажатии. Это часть стандартного пользовательского интерфейса браузера и ожидается от пользователей вашего сайта. Изменение этого ожидания, потому что вы не думаете, что оно выглядит хорошо, вероятно, приведет к плохой работе с пользователями. Любое содержимое, отображаемое в этой области, будет отображаться, как только пользователь перестанет зависать над тегом ссылки.

Я знаю, что любая ссылка, которая не говорит мне, куда она идет, выглядит довольно подозрительной для меня.

Ответ 4

попробуйте это

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

Ответ 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');
            });
        });