ホームページ ウェブフロントエンド jsチュートリアル JavaScript イベント学習 第 10 章 置き換え可能なイベント ペア_JavaScript スキル

JavaScript イベント学習 第 10 章 置き換え可能なイベント ペア_JavaScript スキル

May 16, 2016 pm 06:34 PM
event

テストの制限
この章では、どのイベントを使用してマウス イベントをシミュレートできるかを調べる予定です。この一連のテストにはスクリーン リーダーが含まれていないことに注意してください。すべての基準を満たすことができなかったため、テストにも制限がありました。このテストは、グラフィカル ブラウザでマウスを使用しないユーザーのみを対象としています。
これらのテストは一部のモバイル デバイスでも使用できると思います。条件が不十分なためテストできません。多くの場合、モバイル デバイスのパフォーマンスは常に満足のいくものではありません。
概要
残念ながら、マウス以外のイベントとマウス以外のイベントには多くの違いがあるため、マウス イベントと非マウス イベントに対して厳密な 1 対 1 の解決策を作成することはできません。したがって、以下のアドバイスはほとんどの状況に当てはまりますが、すべてではありません。
以下は私のテスト結果です:
1. マウスオーバー:フォーカス
2. マウスアウト: ブラー
3. dblclick: 不明
5. マウスダウン:キーダウン (最も悪い選択肢)
6. マウスアップ:キーアップ (最も悪い選択肢)
7. マウス移動: マウスなしでは不可能

ページが完全なサポートを必要とする場合ユーザーの場合、イベント ハンドラーを適用できる要素を選択することはほとんどありません。これは実際には、イベント ハンドラーがリンクとフォームでのみ役に立っていた Netscape 3 の時代への逆戻りです。
さらなる研究がまだ必要です。
準備
ほとんどのブラウザでは、ユーザーはタブでページ全体を移動できます。これを行うと、フォーカスは次のリンクまたはフォームに移動します。これは IE と Mozilla の両方で機能します。 Safari では、F1 キーを押してキーボード ショートカットをアクティブにする必要があります。
Opera ユーザーは別のシステムから来ています。リンクにジャンプするには、Ctrl 矢印キーを押す必要があります。組み合わせは違いますが、私はこれを「タビング」と呼びます。
例: 従来のマウスオーバー
どうやって行うのですか?まず最も重要なことは、マウスオーバーとマウスアウトの 2 つのイベントを追加することです:

コードをコピーします コードは次のとおりです:
imgs[i].onmouseover = imgs[i].onfocus = MouseGoesOver;



これで、ユーザーのマウスが通過するかタブが通過すると、関数が実行されます。
ただし、いくつかのイベントを追加するだけでは十分ではありません。私のオリジナルのスタジオでは、画像上でマウスオーバーとマウスアウトを直接設定しています。残念ながら、画像をタブで移動することはほとんど不可能です。タブはリンクとフォームでのみ役立ちます。したがって、image: link の親ノードにイベントを追加する必要があります。
この単純な例は再登録によって変更されませんが、より複雑なスクリプトでは、たとえば div へのアクセス アクティビティを定義できない場合があります。
完璧な使いやすさを確保するには、1998 年当時と同じように、リンクとフォームのイベントを定義するだけです。インターネット上のほとんどのイベントは依然としてリンク上で定義されていますが、テキスト編集などの複雑なスクリプトは、マウス以外のユーザーはクリックする必要があるため利用できません。

翻訳アドレス: http://www.quirksmode.org/js/events_pairs.html

著者: Beiyu (tw:@rehawk)
記事ソース: beiyu.cnblogs.com

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScriptの文字列文字を交換します

カスタムGoogle検索APIセットアップチュートリアル カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

カスタムGoogle検索APIセットアップチュートリアル

例JSONファイルの例 例JSONファイルの例 Mar 03, 2025 am 12:35 AM

例JSONファイルの例

10 jQuery構文蛍光物 10 jQuery構文蛍光物 Mar 02, 2025 am 12:32 AM

10 jQuery構文蛍光物

8見事なjQueryページレイアウトプラグイン 8見事なjQueryページレイアウトプラグイン Mar 06, 2025 am 12:48 AM

8見事なjQueryページレイアウトプラグイン

独自のAjax Webアプリケーションを構築します 独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

独自のAjax Webアプリケーションを構築します

' this' JavaScriptで? ' this' JavaScriptで? Mar 04, 2025 am 01:15 AM

' this' JavaScriptで?

10 JavaScript&JQuery MVCチュートリアル 10 JavaScript&JQuery MVCチュートリアル Mar 02, 2025 am 01:16 AM

10 JavaScript&JQuery MVCチュートリアル

See all articles