javascript:void(0) は注意して使用してください。なぜこのように書くのが良くないのでしょうか?-jsチュートリアル-php.cn

javascript:void(0) は注意して使用してください。なぜこのように書くのが良くないのでしょうか?

零下一度

リリース： 2017-05-17 16:03:45

オリジナル

5143 人が閲覧しました

ステートメントのバグを修正します。 IE6の場合、クリック後にGIFが一時停止するバグは「JavaScript:疑似プロトコルでセミコロンが追加されない」場合にのみ発生します

<a href="javascript:void(0)">

ログイン後にコピー

なぜこのように書くのが良くないのでしょうか

別の視点を提供しましょう。

タグに href 属性を追加することは、次のことを意味します:

:link セレクターはそれを選択できます

この a タグはフォーカスを取得できます (タブボタンを押すとアクセスできます)

ブラウジング中ブラウザのデフォルトのスタイルシートでは、href 属性を持つタグには、cursor:pointer の効果があります (特に、IE の以前のバージョンでは)。

は onclick イベントのタグにバインドされており、特にその機能が ajax リクエストである場合は、基本的にこのタグのデフォルトの動作を使用できず、実際のページに接続できません。たとえば、この要素のカーソルやその他のスタイルも CSS で指定されます。現時点では、href 属性を以下に追加する必要があります:

がキーボードイベントに応答してフォーカスを取得できるようにする (スクリーンリーダーが背後のコンテンツを読み取ってアクセシビリティを向上できるようにする)

ネットワーク上で正常に機能を低下させる接続が非常に貧弱です。CSS に読み込まれていない場合、は手の形と通常のリンクスタイルのままです。

タグに href 属性を与え、それを実際のページに接続しない場合の解決策は次のとおりです。

1.
2.
3.
4.
5.
6.<a href="javascript:void(0)">
7.
8.

ログイン後にコピー

彼らの経験は少し異なります。

1. このリンクをクリックすると、ページが先頭に移動し、window.location.href の末尾に # が追加されます (window.location.href の末尾に # がない場合)。 onclick イベントは js でキャプチャされ、デフォルトのイベントはブロックされます。

2 には予備的なセマンティクスがあります。ただし、ページ内に nogo という ID を持つ要素がある場合、リンクをクリックすると、アンカーポイントメカニズムが機能し、ページが要素の上端に揃えられます。詳細については、Zhang Xinxu の「URL アンカー HTML ポジショニング技術のメカニズム、アプリケーション、および問題点」を参照してください。

3 は Chrome でデフォルトでページヘッダーにジャンプしなくなり、4 は IE11 でページヘッダーにジャンプしなくなりました。以下のテストを参照してください。

5~8も同様の機能ですが、JavaScriptの擬似プロトコルを使用しています。 IE6 では、セミコロンのないオプション 6 と 8 がクリックされると、IE6 はページ内の GIF を一時停止し、onbeforeunload イベントをトリガーします (詳細については、IE6 がこのページにリダイレクトがあることを認識し、すべてのリクエストを中止します)。ここを参照してください)。したがって、この後にの src を置き換えると、IE6 は新しいリクエストをまったく完了しません。

私はオプション 4 を好みます。

<a href="javascript:void(0)"> のような LZ のセマンティックな使用については、すでに十分な詳細な回答がここにあります。この状況でもアクセス可能なアプリケーションをサポートできることを付け加えておきます。メソッドについては、「WAI-ARIA のアクセス可能な Web アプリケーションのプロパティ」を参照してください。

更新、次のテストを行いました:

 <p>
            <a href="#">#</a>
        </p>
        <p>
            <a href="##">##</a>
        </p>
        <p>
            <a href="###">###</a>
        </p>
        <p>
            <a href="####">####</a>
        </p>
        <p>
            <a href="#####">#####</a>
        </p>
        <script type="text/javascript">
            var n = 0 ;            window.onhashchange = function(){
                alert(++n) ;
            }        </script>

ログイン後にコピー

IE11 では、###、####、##### をクリックしても、ページが先頭にジャンプしなくなりました

Chrome では、## をクリックして、 ###、####、##### では、ページが先頭にジャンプしなくなります。

ただし、IE11 と Chrome では、すべてのをクリックすると、アドレスバーが変更され、hashchange イベントがトリガーされます。

つまり、私が前に述べた「###によってアドレスバーは変化しない」ということは間違いです。

他のブラウザを大規模にテストしたわけではありません。これは暫定的な推測です: ### の重要性は、文字数が最も少なく、ページの先頭のアンカーポイントにジャンプしないことです。すべてのブラウザ。

このように書いても問題はありません。これは、この部分がリンクのように見え、マウスには手の形が必要で、クリックに応答する必要がありますが、実際のアクションは存在しないことを意味します。 href="#" を置き換えるために使用されます。この書き方は本質的に HTML と js を混ぜたものではありません。

void(0) は注意して使用してください

# を使用するか void(0) を使用するかにかかわらず、共通の欠点があります。これを行うとこの動作が発生し、これを実現するには js を有効にする必要があります。笑わないでください。ほとんどの人は js を読み込みますが、接続障害などの事故の可能性を排除できません。あるいは、js を使用しない狂った人も実際に少数います。さらに、js は検索エンジンで追跡できないため、これは考慮する必要がある問題です。

この意味で、# はさらに悪いです。単一の # のセマンティクスが実際には暗黙的に Web ページ自体を指しているため、「新しいタブで開く」を使用すると混乱が生じます。そして、この問題 void(0) はそうではありません。

2. IE6でのjavascript:void(0)の無効なメソッドの解決策

3. JavaScriptにおける演算子void(0)の定義と詳細説明

4. href=javascript:void(0) と href=#

の違いをまとめます

以上がjavascript:void(0) は注意して使用してください。なぜこのように書くのが良くないのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。