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書くべきではないんだろう。