Spanタグのonclickを指定して別要素のclick呼び出すとGoogle Chromeでは機能しない
「IEだと動くがGoogle Chromeだと動かない」というタイプのネタ
spanタグにonclickを指定して、その中で直接JS呼び出せば機能するが、
そこから別の(例えばhidden)要素を無理やりclickするような指示を出すと機能しない。
下記のケースで機能するのは①のみ。
①
<span onClick="alert('Span Tag Click.');" style="background-color: #FFFF00">Span Tag test.</span>
②
<input type="hidden" name="hidden_obj1" onClick="alert('span to hidden_obj1 click.')" >
<span onClick="hidden_obj1.click();" style="background-color: #FF00FF">Span Tag test(->hidden1 click).</span>
③
<input type="hidden" name="hidden_obj2" onClick="alert('span to hidden_obj2 click.')" >
<span onClick="hidden_obj2.onclick();" style="background-color: #0FFFFF">Span Tag test(->hidden2 'on'click).</span>
ただし、form内に要素を配置して
document.~から指定すると同じような実装でGoogle Chromeでも機能する。
(もしかしたら②③も同じように動くのかも。試してない)
④
<form name="form_test">
<input type="hidden" name="hidden_obj3" onClick="alert('span to hidden_obj3 click.')" >
<span onClick="document.form_test.hidden_obj3.click();" style="background-color: #0000FF">Span Tag test(->document.form_test.hidden3 click).</span>
</form>
③の例を④に組み込んだパターンとして
⑤
<form name="form_test">
<input type="hidden" name="hidden_obj4" onClick="alert('span to hidden_obj4 click.')" >
<span onClick="document.form_test.hidden_obj4.onclick();" style="background-color: #00FF00">Span Tag test(->document.form_test.hidden4 'on'click).</span>
</form>
というのがある。これも動作する。
余談だが、⑤はspanタグのonclick記述が
document.form_test.hidden_obj4.onclick();
なら動作するが
document.form_test.hidden_obj4.onClick();
だと動作しない。
Google Chromeは「onclick」の特にCの部分が大文字か小文字かで解釈わかれると
どこかのサイトで見た記憶があるが、そうゆうことらしい。
(Windows7 Pro SP1/Google Chromeバージョン 34.0.1847.131 mにて確認)
冒頭で述べたように、IE(10)だと①~⑤は全て動作する。
検証に使ったHTMLを添付します
-------------------------------------------------------------------------
いろいろ調べる限りでも、
spanタグは「インライン要素のスタイル適用に使う」のが本筋らしいので、
ここにonclick書くこと自体がなんか違うのかも。
開発上の事情で
ボタンではなく文章の一部(テキスト)からリクエスト飛ばさざるを得ない
というようなケースがない限りは本来spanタグにonclick書くべきではないんだろう。