クローズ済みのようですが以下回答させていただきます。
結論から言うと、onclick
属性値内でのスコープに関する仕様が原因です。
onclick
内で参照した変数名や関数名は「DOM要素自身(今回は <span>
タグ) → [中略]→ window
(グローバル変数&関数)」の順で同名のプロパティが探索されます。
今回の click()
は実際には this.click()
= HTMLElement.click()
の呼び出しになっていて、グローバルスコープに定義した function click(){}
よりも優先して呼び出されています。
よって意図した関数が実行されていない状態です。
関数名を myClick()
に変更した場合は、上記の探索経路の途中に該当するプロパティが無いので function myClick(){}
が呼び出されて想定通り動作します。
以下のように onclick
属性値に直接 console.log
を埋め込んでみると参考になると思います。
<span onclick="console.log(click, this.click, this);">テスト</span>
回避策としては探索経路中に存在するのと同じ関数名を使用しないことですが、一々調べてられないので現実的ではありません。jQuery を使用しているのであれば onclick
属性の使用を止めて以下のようにイベント登録するのがよいと思います。
script.js
$(function(){
//セレクタは適宜変更してください
$('span').on('click', function(){
$(this).css('color', 'red');
})
})
ちなみにご報告にある IE11 の開発ツールについてですが、どうやら”ページ表示後にツールを開くか閉じた場合”に意図した動作になる(= window.click()
が実行される)ようで、ツールを開いたままor閉じたままページをリロードした場合は動作しませんでした。IE11 のツール開閉時に参照先が変更されているっぽいのですが、本来の仕様とは異なるはずなのでブラウザのバグなのかな...? と思います(情報を見つけられなかったので特有の挙動なのかもしれません)。
※ Edge、Chrome、FireFox ではツールの起動切替に関わらず動作しないままです。
以下、参考URLです。こちらもご覧下さい。
https://stackoverflow.com/questions/2204538/what-is-click-in-javascript/2204568
https://qiita.com/hakatashi/items/40fbedf61a3dd79f21fc
ちなみに @mogamoga1337 さんが挙げられているサイトに記載の内容には少し誤りがあります。
予約語が変数名・関数名に使えないのは正しいですが、click
onclick
onClick
は予約語ではありません。
意図した動作にならないのは、①の click
は今回と同じ現象、②の onclick
は再起呼び出しでコールスタックが溢れたのが原因です。