13

バックグラウンド

最新のブラウザーは従来のステータス バーを廃止し、代わりにウィンドウの下部に小さなツールチップを描画して、ホバー/フォーカス時にリンク ターゲットを表示します。

この (私の場合は望ましくない) 動作の例を次のスクリーンショットに示します。

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

質問

  1. これらのツールチップを無効にするポータブルな方法はありますか?
  2. 特定の状況でこれを行うことの明らかな欠点を見逃していますか?
  3. 私の試み（以下を参照）はこれを達成するための合理的な方法ですか？

推論

私はイントラネット Web アプリケーションに取り組んでおり、いくつかのアプリケーション固有のアクションに対してこの動作を無効にしたいと考えています。率直に言っhttps://server/#て、アプリケーションがその場所に独自のステータス バーを描画する場合があるため、どこでも目障りで目障りなためです。

私の試み

私は本業の Web 開発者ではないので、この分野の知識はまだかなり限られています。

とにかく、これが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

これらのツールチップを無効にするポータブルな方法はありますか?

いいえ、上記の例のような回避策以外は。

特定の状況でこれを行うことの明らかな欠点を見逃していますか?

全体の状況がぎこちないという事実を見逃しているようです。ボタンのように見せようとしているのに、なぜリンクがあるのでしょうか? ボタンを使用するだけです。さらに言えば、スパンでリンクを切り替えることになった場合、リンクを気にする必要はありません。スパンを使用するだけです。

私の試み（以下を参照）はこれを達成するための合理的な方法ですか？

ドキュメントからこれらのアンカー要素を削除しているため、一般的なアプローチとしてはあまり合理的ではありません。そのため、添付されたイベント リスナー、エキスパンドなどが失われます。特定の状況ではうまくいくかもしれませんが、最初からリンクを使用しないほうが賢明な方法です (上記を参照)。

それでもこのようなことを行うことに決めている場合は、少なくとも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」スタイリングが機能しなくなりました。どうやら、少なくとも Firefox では、href のない "a" はホバー不可能と見なされます。そこで、「ボタン」と「ボタン: ホバー」スタイルに切り替えたところ、すべてうまくいきました。

このソリューションが悪い習慣と見なされることは理解していますが、状況によっては、たとえば、私が作成しているサイトが主にフルスクリーンの写真で構成されている場合、美学が原則よりも優先されます。

于 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 に答える