• 締切済み
  • 困ってます

onclickとonkeypressの重複

W3Cのアクセシビリティ指針によれば、onclick属性を指定するならonkeypress属性も指定せよ、とのことですが、たとえば<input type="button">にこの両方を指定すると、IEなどの場合、このボタンにフォーカスがある状態でスペースキーを押すと、onkeypressイベント→onclickイベントというように両方とも発生してしまいます。 本来、ポインティングデバイスの代替の操作のためであるにもかかわらず、これでは逆にアクセシビリティは低下するばかりでなく、処理によっては2回行って欲しくない場合もあり、なんとも面倒です。 考えられる対策としては、たとえば、ほとんどのブラウザではキーでもonclickが起きるようになっているため、あえてonkeypressのほうはダミーを指定しておく、などでしょうか。 これに対してのお考えや、対策など御教授いただけたらと思います。 よろしくお願いいたします。

共感・応援の気持ちを伝えよう!

  • 回答数6
  • 閲覧数2413
  • ありがとう数8

みんなの回答

  • 回答No.6
noname#39970
noname#39970

うーん そうなるとやっぱりこうなるのかなぁ・・・ //------------ ck=0; kp=0; //mouse function act_m(){  if(ck<kp){kp=ck;return;}  Test01();  if(ck==kp)ck++; } //key function act_k(){  if(kp<ck){ck=kp;return;}  Test01();  if(kp==ck)kp++; } function Test01(){  //ここに処理 } //------------ でもほんとならinputはformのパーツだから、邪道っぽいかもしれないけどNo5の3つめみたいなonSubmitで処理な方がいいのかも。 >> ダミーを入れるくらいなら動作安定の為に排除 >具体的な問題などお教えいただけないでしょうか 現行のブラウザでは多分問題は起こらない。 だからと言って古いブラウザもまだ有るし新しいブラウザで大丈夫で有り続ける保証はどこにもない。 余計な処理を書いて予期せぬ動作をするかもしれないなら排除すべきである、と言ってるだけ。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

う~ん…それだと今度は、片方のイベントが発生した後、もう片方のイベントが発生した場合に、やはり実行されません…。 > 余計な処理を書いて予期せぬ動作をするかもしれないなら排除すべきである、と言ってるだけ。 なるほどそう言うことでしたか。 イベントキャンセルは、ごくありきたりな処理でもあって、予期せぬ動作をする可能性も、今後サポートされなくなる見込みも、今のところ特に考えられないので、やはりとりあえずはこれが良さそうですね。

質問者からの補足

※下の「お礼」欄の続き ちなみに、タイマーを使うと言う手も考えてみましたが(およそ現実的でないほど短時間に複数起動される場合は処理をキャンセルさせる方法)、しかしこれでは、キーによって「押したとき」と「離したとき」に起動される場合があり、押し方によっては結果は同じなので、やめました。

関連するQ&A

  • 妥当なonkeypressは?

    以前に似たような質問をさせていただきましたが(http://okwave.jp/qa2486538.html)、 W3Cのアクセシビリティ指針「onclick属性を指定するならonkeypress属性も指定せよ」に準拠するため、 <a href="~" onclick="func()" onkeypress="func()">TEXT</a> などと、両方にまったく同じ属性値を書いている例を大変よく見かけます。 しかし、これでは「すべてのキー」に反応してしまいますよね(少なくともIEやFirefoxなど)。 アンカーにフォーカスがある状態では、(一部を除き)とにかくキーが押されたらクリックされたのと同じ動作をしてしまう。 たとえばエスケープキーを押したユーザーには「キャンセル」的な意思があったのであって、クリックと同義の意思ではない、まったく逆だろう、と思うわけです。 まぁ個人的には、このW3Cの指針がどうも理解できず、装置依存への対処なんてのは文書の責任じゃなくてクライアントアプリ(ブラウザ)の役目だろう、と思うのですが、それはさておき… ネット上の様々なコードを見てみると、onkeypressのほうだけは「return false;」を書いているパターンもある程度あるようで、言ってみれば本来の目的「装置依存~」を殺してでもエラーを回避しようとする、あるいは別のパターンとしては別の関数を呼んで押されたキー(スペースキー以外は無視)というような処理を入れているパターン、など。 そこでお聞きしたいのですが、一般的に妥当な、というか、皆さんはどのように対処していますか? もちろん、最も動作的に理想なのは押されたキーを調べてスペースキーだけ…という処理なんでしょうけど、見たところこのような対処をしているケースは少ないのと、現実には、ほんのちょっとしたことをしたいだけなのに、わざわざそんなコードを入れるのもどうか、ということもあり、 むしろW3Cの理念的なことよりも現実的に、ほとんどすべての現行ブラウザはキーでもonclickが発生するので「return false;」が最も妥当なのかな、とも思ったりもしています。 実際のところ、どうなんでしょう。

  • onclickをEnterキーでも行いたい

    チャットの仕組みを知りたくて以下のサイトを見ています。 http://www.ibm.com/developerworks/jp/xml/library/x-ajaxxml8/ ここの『リスト 6. chat.php (修正後)』にあります、発言を送信する部分、 <button onclick="addmessage()">Add</button> をEnterキーで行いたいと思い、 onKeyPressへ書き換えてみましたが反応しませんでした。 こちらをonclickでもEnterキーでも両方で行いたいのですが、どのようにすればよろしいのでしょうか?

  • javascript イベント属性

    javascriptには、イベント属性としてondblclickや、onkeydown等があると思います。 W3CのDOM HTML(アドレス:http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html) 内で見つけることが出来ませんでした。 ⇒click、select、focusという用語は、見つけたのですが、メソッドなので違うと思っています。 onclick、ondblclick、onkeypress等のイベント属性の情報を調べるために、 W3CのHPを見るということ自体が間違っているのでしょうか? ※Eventのほうも見てみましたが、 http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-eventgroupings-keyevents ⇒onclickではなく、clickだったので分からなくなっています。 javascriptには、イベント属性としてondblclickや、onkeydown等のイベント属性に対する情報は どこで調べることが出来るのでしょうか。 ご教授お願いします。

  • 回答No.5
noname#39970
noname#39970

>すべてを適える そもそも各ブラウザが個々個々に実装をしていてW3Cに完全準拠できていないのが現状なのでどこか捨てる必要が有る。 onKeypressにダミーを入れるくらいなら動作安定の為に排除すべき。(つまり書かない) W3Cが何と言うかは別としてプログラミング的には onClickというのは onMouseDownとonMouseUpの組みなのに対して onKeypressは onKeyDownとonKeyUpの組みでは無いので等価としての処理を行うのは誤りとなる。 正しく対応するのならkeyDownで正しくオブジェクト内で入力を開始した事を認識しkeypressによって目的のキーが押されているのを確認しkeyUpによって発動すべき。 食い違いの実装が有る以上は完全に満足させるためには作成者が煩わしいコーディングをしなければならない事になる。 (ちょっと前までレイヤーを使う為にIEとNNを判別して別々の処理を書いて同じに見せる無駄が有ったのと似ている) 諦めて排除も1つの選択だと思うけど。 //--------------ボタンが「再計算」系で何度も実行される場合 flg=false; //mouse function act_m(){  if(flg){flg=false;return;}  Test01();  flg=true; } //key function act_k(){  if(flg){flg=false;return;}  Test01();  flg=true; } function Test01(){  //ここに処理 } //--------------ボタンはページ表示後1度しか使われない場合 flg=false; function Test01(){  if(flg){return;}  //ここに処理  flg=true; } //--------------邪道系 <form action="javascript:()" onSubmit="document.getElementById('EvLog').innerHTML='test';">  <input type=submit value=" TEST "> </form> <form action="javascript:()" onSubmit="document.getElementById('EvLog').innerHTML='';">  <input type=submit value=" Clear "> </form> <div id="EvLog"></div>

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ご回答ありがとうございます。 ですが・・・そのロジックは、単に「2回に1回しか処理しない」というだけのような気が…。 一応、実際に試してみましたが、やはり2回のイベントに対して1回処理するだけでした。 あくまでも、必ずしもイベントが重複するわけではないので… また、act_m と act_k という同じ処理の関数を2つ作る意味もありませんし、言わばフラグはカウンターの役割ですよね?(ゼロのとき実行、1がMAXでゼロリセットする) せっかく回答いただいたのに、すみません。 > onKeypressにダミーを入れるくらいなら動作安定の為に排除すべき よろしければ、その動作不安定になるという点、具体的な問題などお教えいただけないでしょうか。

  • 回答No.4
noname#39970
noname#39970

>マウス以外への考慮なんて、文書がやるべきではなくブラウザやOS側の役目 だからブラウザは可能なように改良されたんだと思う。 昔はボタンにtabでフォーカスする事すらできなかった。 で、考えたんだけどflagのような物を用意してそれ見て判定するのはどうかな。 ページ更新されないまま何度も呼ばれるようならonClick側とonKeypress側で1つずつ用意(例としてck、kpで表記) ・どちらの処理でも ck == kp なら続行し、処理の終りで呼ばれた方の変数をインクリメント ・しかし ck != kp なら ckとkp を同じ値にし、処理は続行せずにreturn これなら繰返しでも大丈夫のような・・・ あんまり美しいアルゴリズムじゃない気がするけど。。。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ご回答ありがとうございます。 すみません、ちょっと解らなかったのですが、具体的に御教授いただけないでしょうか。 私が下に書いた処理キャンセルフラグを、キーが押されている間にオンにしておくのではなく、ページの更新で制御する、ということでしょうか。 そのページの更新とは、どのようなことでしょうか。 お手数ですが、よろしくお願いします。 前に書いたように、そもそも、ほとんどのブラウザが、ブラウザ自身のほうで代替操作を用意しているので、 ●アクセシビリティを低下させず ●重複起動による不具合を回避し ●W3Cの指針にも従う というすべてを適える方法は、やはりonkeypress="return false" または void でダミーを指定しておくしかないのかな、と思い始めています…。

  • 回答No.3
noname#39970
noname#39970

onClickとして反応するキーは無視するように作ったら良いと思う。 その上でonClickとして反応しないキーを拾ってonClickで呼んでるやつを呼んだら良いのでは?

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ご回答ありがとうございます。 残念ながら、少なくともIEでは、onclickイベントの中で押されているキーが取得できないか、あるいはキーを離したときに呼ばれるので取得できない(この可能性は低そう)ようです。 onclickイベントの中で押されたキーを取得できる方法をご存知でしたら、御教授いただければ助かります。 それともう一つ、キーによる違いというのは、おそらく環境に依存しますよね。それらに対応する方法が見当たらず あるいは、それこそ指針などで規定されていれば一部の環境をあきらめるのも考えられますが、それもないようです。 今のところ、onkeydownで「onclickキャンセル」フラグを立てて、onkeyupでフラグをオフ、という方法を思いついたのですが(つまりキーが押されている間はonclickイベントはキャンセルさせる)、コードは簡単ですがどうもタグが煩雑すぎる… しかし、よく言われてはいますが、アクセシビリティ指針は本当に疑問の多い発展途上なものですね。 そもそもマウス以外への考慮なんて、文書がやるべきではなくブラウザやOS側の役目というか義務でしょうに…

質問者からの補足

下のフラグの方法ですが、IEのスペースキーでは、離したときにonkeyup⇒onclickという順に発生してしまい、ダメでした・・

  • 回答No.2

>onkeypressイベント→onclickイベントというように両方とも発生してしまいます。 済みません。一時期再現していたと思っていたのですが、手元で再現しなくなっちゃいました。考え直してきます。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ありがとうございます。 実験のための再現は、以下を使ってください。 とりあえずIE用ですが(しかもかなり荒いコードですが)、適宜編集してください。 <html> <head> <script type="text/javascript"> function Test01(sEv){ document.getElementById("EvLog").insertAdjacentHTML("BeforeEnd", sEv + "<br>"); } </script> </head> <body> <input type="button" value=" TEST " onclick="Test01('onclick');" onkeypress="Test01('onkeypress');"> <input type="button" value=" Clear " onclick="document.getElementById('EvLog').innerHTML = '';"> <div id="EvLog"></div> </body> </html> たとえばIEの場合は、 スペースキーを押したとき⇒onkeypress、離したとき⇒onclick エンターキーを押したとき⇒onkeypressとonclick ESCキー、文字キー⇒onkeypress といった具合です。

  • 回答No.1

何か駄目だ・・・こんなのしか思いつかない・・・ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ふはは</title> <script type="text/javascript"> function huga(){ test = document.getElementById('hoge'); test.firstChild.nodeValue = test.firstChild.nodeValue + a; alert(test.firstChild.nodeValue); } a=0; </script> </head> <body> <div id="hoge"></div> <p><a href="gahagaha.html" style="border:red solid;" onclick="if(a==0){huga();};a=0;" onkeypress="a=1;huga();">イベント実験</a></p> <p><input type="button" style="border:green solid;" onclick="if(a==0){huga();};a=0;" onkeypress="a=2;huga();" value="Event" /></p> </body> </html> Javascript慣れしている訳じゃないから間違ってるかも(汗

共感・感謝の気持ちを伝えよう!

関連するQ&A

  • JavaScriptについて

    JavaScriptの質問です。 今、学校の課題でWebページを作っていて、 「Back」ってボタンを押すと前のページに戻るようにしたいのですが、 <FORM> <INPUT type="submit" value="BACK" onclick="history.back();">  </FORM> として、学校の評価に用いられるHTMLlintで文法のチェックをしたところ <FORM> には ACTION 属性が必要です ONCLICK 属性を使うときは ONKEYPRESS 属性も指定しましょう。 と警告が出てきました。 action属性とは具体的に何を指定すればいいのでしょうか。 また、onKeyPress属性は何をつければいいですか? お願いします。

  • HTMLの記述について

    下記HTMLにおいて <IMG NAME="slideshow" id="SLIDESHOW" SRC="image/B.jpeg" BORDER="0" alt="ロゴ"> <IMG> の NAME 属性の値 `slideshow` と ID 属性の値 `SLIDESHOW` は、同一タグ中では同じでなければないとは?(1) <FORM> <INPUT TYPE=button VALUE="自動" onClick ="if (timeout_id == null) animate()"> <INPUT TYPE=button VALUE="停止" onClick ="if (timeout_id) clearTimeout(timeout_id); timeout_id=null;"> <INPUT TYPE=button VALUE="前へ" onClick ="if (timeout_id) clearTimeout(timeout_id); timeout_id=null; showFrame(1);"> <INPUT TYPE=button VALUE="次へ" onClick="if (timeout_id) clearTimeout(timeout_id); timeout_id=null; showFrame(0);"> </FORM> <FORM> には ACTION 属性が必要とは? (2) ONCLICK 属性を使うときは ONKEYPRESS 属性も指定とは?(3) (<INPUT TYPE="BUTTON"> には TABINDEX 属性を指定するとは?(4) (<INPUT> には ACCESSKEY 属性を指定するとは?(5) HTMLを教えて下さい。

    • ベストアンサー
    • HTML
  • HTML5セキュリティの質問です。

    PHPを埋め込む、HTML5の質問です。 下記サイト(PDF)の41ページの質問です。 http://www.ospn.jp/osc2013.enterprise/pdf/osc2013_enterprise_jpcert.pdf HTML新要素・属性:<button formaction> 生成する HTML へのイベントハンドラの挿入を禁ずるた めに、on で始まる属性を検出する対策をとる場合があっ たが、このような対策では不十分 従来は onmouseover, onclickといったユーザの操作が必 要な属性が攻撃に使われたが、autofocus 属性と組み合 わせることで、ユーザの操作なしに攻撃可能になった <form> <button formaction="javascript:alert(1)">text</button> </form> (https://www.jpcert.or.jp/research/html5.htmlからの引用と思われる。) 上記の意味がわかりません。 ホームページ作成でまだ、button要素は使うなという事でしょうか? どのような対策をとるべきでしょうか? 引用元の https://www.jpcert.or.jp/research/html5.html <input>要素と共に、はっきりとクロスサイトスクリプティングの危険とあるのですが、 どうエスケープするのでしょうか? phpのhtmlspecialcharsでは対応できないのでしょうか? onclickは使用してはならないという事でしょうか? (<video>, <audio>はまだ使用してはいけないのは理解できるのですが・・・・) それも変な解釈と思い質問しました。 どうしてもBootstrapでbuttonを使用したいのですが、 セキュリティ的にまだ使用してはいけないのでしょうか? 教えてください。 補足 非同期通信のAjax使わなければいいのでしょうか?

  • jqueryのajaxに引数を指定

    ajaxを利用して外部HTMLを読み込ませたいのですが$.ajax()などをonclickイベントなどで呼び出すとき引数を指定してurlを設定することはできませんか イメージとしては 例えばjqueryでloadingpageという関数を作って HTMLを <input type="button" onclick="loadingpage(http://www.hogehoge.com);"> って感じにしてボタンをクリックするとhttp://www.hogehoge.comがページ内で読みだされるようにしたいです。

  • 開いたタブ(ウィンドウ)にフォーカスが当たらない

    IE8 をタブモードで利用したとき、新しく開いた タブ(ウィンドウ)にフォーカスが当たりません。 JavaScript の window.open で別タブ(ウィンドウ)を 表示する処理を onload イベントで行うと、新しい タブ(ウィンドウ)にフォーカスがあたりません。 button のクリックイベントで表示した場合は、 新しいタブ(ウィンドウ)にフォーカスが当たります。 やりたいことは submit してページを再表示するときに 新しいタブ(ウィンドウ)を表示して、そちらにフォー カスを設定することです。 また、できればブラウザのバージョンによって処理を 切り替えるようなことはしたくありません。 何か原因や解決策などありましたらご教授ください。 よろしくお願いします。 <この現象が発生する環境> IE8 と IE7 で下記のように設定した場合 ツール → インターネットオプション → 全般タブ  → タブ → 設定  → ポップアップの発生時  の設定を   「常に新しいタブでポップアップを開く」  にする。 ※IE9 ではこの現象は発生せず、新しいタブ(ウィンドウ)に  フォーカスがあたります。 ※IE7, 8 でもタブモードではなく、別ウィンドウで開く  設定になっている場合は、新しいウィンドウにフォーカスが  あたります。 <サンプルソースと説明> (説明) test1.html から window.open で test2.html を表示します。 onload で表示したときは test2.html のタブ(ウィンドウ)に フォーカスがあたりません。 button のクリックイベントで表示したときは test2.html の タブ(ウィンドウ)にフォーカスがあたります。 ---(test1.html)---------------------------------- <html> <head runat="server"> <title></title> <script language="javascript" type="text/javascript"> window.onload = function () { OpenWindowTest(); } function OpenWindowTest() { var TestWin = window.open('test2.html'); TestWin.document.focus(); } </script> </head> <body> <form> <div> <input type="button" value="button" onclick="OpenWindowTest();" /> <br /> <input type="submit" value="submit" /> </div> </form> </body> </html> --------------------------------------------------- ---(test2.html)---------------------------------- <html> <body onload="window.focus();"> テストページ </body> </html> ---------------------------------------------------

  • Access2003 VBA イベントハンドラ

    メインフォームからインスタンス化して色々な用途に使用するサブフォームがあります。 そのフォームにはボタンがついていますが、用途別にインスタンス化するときに、別々のクリックイベントをセットしたいのですが、方法が分かりません。 set subform = New subformの基 subform.button1.OnClick="=関数名" とやると、「イベント プロパティに指定した式 クリック時 でエラーが発生しました:このオブジェクトにはオートメーションオブジェクト'関数名'は含まれません」、と実行時エラーが出ます。 ひょっとして、こういう使い方はできないのでしょうか?

  • winxpで作ったHPがwin8では動作が違ってし

    3種類の画像をイベント属性で切り替わるようにして、最後マウスのボタンを押したときにリンクして他のぺーじに移動するように作りました。作った時のwinXPでは上手く動作したのですが、win8では画像の外枠四方にポインターを乗せた時と、同じ外枠をクリックした時に画像が変わるようになります。画像の中央にポインターを移動させると最初の画像になってしまい、クリックするとリンクして指定したページに移動します。参考になるか分かりませんがコードを載せておきますのでよろしくお願いします。 <div class="button1"> <img src="gazou/button/information1.gif" alt="情報" onmouseover="this.src='gazou/button/information2.gif'" onmouseout="this.src='gazou/button/information1.gif'" onmousedown="this.src='gazou/button/information3.gif'" usemap="#buttonmap1"> <map id="buttonmap1"> <area href="information-w.html" alt="情報" shape="rect" coords="3,3,121,121"> </map> </div> ちなみに usemap="#buttonmap1"の#を外すと3種類のイベント属性はちゃんと画像の中央で動作しますが、マウスをクリックしてもリンク先に移動はしませんでした。

    • ベストアンサー
    • HTML
  • formタグのaction属性

    お世話になります。holmonと申します。 先日、とほほ様のJavaScriptリファレンスで調べものをしている最中、わからない箇所が1点ありましたので、質問させていただくことにしました。 下記formタグにおいて、action要素の#が何を意味しているかがわかりません。 <form action="#"> <input type="button" value="Click Me!!" onclick="window.alert('Hello!!')"> </form> おそらくactionによる送信先の指定を自分(もしくは送信先設定を無効)にしているのかと思いますが、詳しい方、居られましたらご教授いただきたいと思います。 ※w3c勧告の○○ら辺見ればわかるよ的なことも教えていただけると助かります^^; URLは下記です。(イベントハンドラの項) http://www.tohoho-web.com/js/write.htm

    • ベストアンサー
    • HTML
  • VBS で web上のOKボタンをクリックしたい

    IE上で表示されたOKボタンをクリックしたいのですが name="ボタン名" がなく クリックできないんです。 ソースは下記のようなソースで OKボタンにフォーカスすると javascript:void(0) とでたので objIE.Document.all("javascript:void(0);").click と記入してみたのですが クリックできないんです。 話し下手ですみませんが おわかりのかたいればご教示いただければ幸いです。 ********ソース <table cellspacing="0" cellpadding="0" border="0"> <tbody><tr> <td class="button-sl"><a href="javascript:void(0);" onclick="OpenAPage('steprequest.rtsx')" onkeypress="OpenAPage('steprequest.rtsx')"><img onmouseover="this.src='イメージ画像.gif'" onmouseout="this.src='イメージ画像.gif'" alt="YES" src="イメージ画像.gif" border="0"></a> </td>

  • IE限定可 <tr>~</tr>タグの上げ下げ方法は?

    <FORM id=formid name=frm action=#> <table> <tr onclick=chCell(this) onFocus=chCell(this)> <td style=CURSOR:hand>cell 1</td> <td style=CURSOR:hand>hoge</td> </tr> <tr onclick=chCell(this) onFocus=chCell(this)> <td style=CURSOR:hand>cell 2</td> <td style=CURSOR:hand>hoge</td> </tr> <tr onclick=chCell(this) onFocus=chCell(this)> <td style=CURSOR:hand>cell 3</td> <td style=CURSOR:hand>hoge</td> </tr> <table> <input type="button" value="項目を上げる"> <input type="button" value="項目を下げる"> </form> 上記のようなフォームで以下の事が実装したいのですがどなたかご教授頂けませんでしょうか。 ・ 項目(行)をクリックすると色が変わる ← (実装済み) ・ 行を指定して「項目を上げる」をクリックすると上へ上がる ・ 行を指定して「項目を下げる」をクリックすると下へ上がる ・ 矢印キーでフォーカスの上下移動 何卒お願い申し上げます。