裏紙に書く程度の内容

onClickがchromeで動かない件

selectタグのoptiononclickを指定するとchromeではうまく動きません。

その解決方法についてのメモ書き。

問題の状況

以下のhtml。

IE,Firefoxではonclickが動くけどchromeでは動きません。

<select>
  <option onclick="console.log('clicked!');">1</option>
  <option onclick="console.log('clicked!');">2</option>
  <option onclick="console.log('clicked!');">3</option>
  <option onclick="console.log('clicked!');">4</option>
  <option onclick="console.log('clicked!');">5</option>
</select>

たぶんwebkit系の問題だと思うのでmac持ってないので試してないけど、おそらくsafariでも動かないんじゃないかと思います。

W3Cのonclickの仕様を見てみると下記の通り記述されています。

The onclick event occurs when the pointing device button is clicked over an element. This attribute may be used with most elements.

参考:http://www.w3.org/TR/html401/interact/scripts.html

要約すると、「要素上でクリックされたら発火するよ。これはほとんどの要素で使えるよ。」って書いてあります。

select,optionに関しては、Attributes defined elsewhereのところにonclickもしっかり記述してあります。

http://www.w3.org/TR/html401/interact/forms.html#h-17.6

つまりoptiononclickは発火するのが正しいはずです。

(ちなみに他のondblclickonmousedownもchromeでは発火しませんでした。)

chromeがなぜイベントを拾わないかはぶっちゃけわかりませんでした。

が、発火しないものは仕方ない。何とかします。

対処方法

selectonchangeを使用します。

<select onchange="selectChange(this)">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
function selectChange(obj) {
  console.log(obj.options[obj.selectedIndex].value);
}

こんな感じ。

optionsoptionの一覧が取得でき、selectedIndexで選択されたインデックスが取得できます。

onchangeは要素が変化したときに発火します。こっちのほうがclick使うより実際のイメージに近いので、知っていたらoptiononclickなんて使わないと思いますが。

Index