Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

開発者支援ツール(IE11)

解決したいこと

以下のように"テスト"の色をクリックイベントで変更したいのですができません。
なぜか開発者支援ツールを立ち上げるとできます。
どうすれば,開発者支援ツールを立ち上げることなく,動作させるのでしょうか。
ブラウザはIE11です。

script.js
function click(elem){
    $(elem).css('color','red');
}
index.html
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>イベント</title>
</head>
<body>
  <span onclick="click(this);">テスト</span>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

追記

メソッド名かえてみたら,できました。
なぜなんだろう?

0

2Answer

クローズ済みのようですが以下回答させていただきます。

結論から言うと、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 は再起呼び出しでコールスタックが溢れたのが原因です。

2Like

Comments

  1. @TakuyaWatanabe

    Questioner

    なるほど!ありがとうございます。

Your answer might help someone💌