0

WebアプリケーションのカスタムJavaScript動作に関連付けられているユーザー操作要素のほとんどはa、意味のある属性値を持つHTMLリンク（要素）であるhref可能性があり、JavaScriptが有効になっていない環境で使用できるようになります。

<a id="profile" href="profile">Profile</a>
<script>
  document.getElementById("profile").onclick = function() {
    return !open(this.href, "_blank", "scrollbars=no,status=no"); // whatever
  };
</script>

ただし、一部のインタラクション要素はJavaScriptに深くリンクしています。これは、それらが含まれるWebアプリケーションを実行するためにJavaScriptが必要であるか、JavaScriptによって生成されており、使用できない場合は意味がないためです。

それらの場合、ユーザーがどのデバイスを使用していてもユーザーと対話できるようにしたいので（つまり、マウス、キーボード、タッチ、…要素に対して自分で対話を定義したくないspan）、2つの関連するHTML要素が表示されます。aおよびbutton。

ここでの要素に関する私の問題aは、それが私が望まない少なくとも1つの動作を定義することです：ユーザーが好きな場所（新しいタブなど）でターゲットを開くことができるのに対し、私が行いたいインタラクションは現在のタブに固有です。

ここでの要素に関する私の問題はbutton、オンラインリソースからわかる限り、すべての最新のブラウザーで確実にスタイルを設定することが難しいことです（ただし、現在でもそうであるかどうかはわかりません）。

この質問のいくつかの側面はすでに他の場所で回答されていますが、包括的で最新の要約が見つかりません。どのHTML要素を使用することをお勧めしますか？

4

1 に答える 1

3

<button>要素のスタイルの問題や要素の動作を伴わずに要素を意味的にボタンにしたい場合は<a href>、要素を。とともに使用する必要があります[role="button"]。<span>一般的に使用されますが、ほとんどすべての要素を使用できます。

<span role="button"></span>

さて、これ[role="button"]は実際には支援技術の単なる旗であるため、ボタンとして反応するようにいくつかのインタラクションを設定する必要がありますが、実際には非常に簡単です。

ボタン（リンクやフォーム要素など）は通常、タブで移動できます。キーボードショートカットがすでに設定されている場合など、これは必ずしも必要ではありません。<span>タブ順で必要な場合は、[tabindex]属性を追加するだけです。

<span role="button" tabindex="0"></span>

これでボタンを押すことができますが、および/またはが押されたときにイベントtabをトリガーしたい場合があります。clickEnterSpace

ボタンにイベントリスナーを追加するだけで十分です。

簡潔にするために、この例ではjQueryを使用しています。 
$(document).on('keydown', 'span[role="button"]', function (e) {
    if (e.which === 13 || e.which === 32) {
        $(this).click();
        e.preventDefault();
    }
});

これは、イベント委任形式を使用して、[role = "button"]ですべてのスパンのクリックサポートを提供します。状況に応じて、別のセレクターを選択することをお勧めします。

あとは、ボタンがクリックされたときにリッスンするだけです。

繰り返しますが、jQuery： 
$('.myButtonClass').click(function () {
    ...do stuff...
});

ここで、他のデバイスの場合、たとえばtouchイベントのクリックをトリガーする必要があります。jQueryを使用している場合は、および/またはへのtouch変換をサポートするさまざまなライブラリがあります。jQueryを使用していない場合、イベントをリッスンするのはそれほど手間がかかりません。clicktaptouch

タッチを処理するためのコード例は提供しませんが、それはボタンの機能に依存するためです。ボタンのタッチを開始するだけでハンドラーをトリガーしたい場合（と同等）、同じ要素でタッチイベントを開始およびmousedown停止した場合にハンドラーをトリガーしたい場合（動作と同様）通常は）。click

于 2012-11-16T14:55:55.353 に答える