クリックしても反応しない。(FireFox)
しばらく前に買った「ゲームで学ぶ JavaScript 入門 HTML5&CSS も身につく!」と
いう本。大変勉強になるのだが 15puzzle が初期画像は出るのだが
数字をクリックしても何も反応が出ない。
私は普段 firefox を使っているのだが、他のブラウザ、IE11,opera12.18,
Google chrome (現最新バージョン) 49.0.2623.87 m (64-bit) では動くのだが
firefox (最新バージョン)45.0 でだけ全く反応がありません。
内容は初期化関数で
---- function init() { var table = document.getElementById("table"); for (var i = 0 ; i < 4 ; i++) { var tr = document.createElement("tr"); for (var j = 0 ; j < 4 ; j++) { var td = document.createElement("td"); var index = i * 4 + j; td.className = "tile"; td.index = index; td.value = index; td.textContent = index == 0 ? "" : index; td.onclick = click; tr.appendChild(td); tiles.push(td); } table.appendChild(tr); } for (var i = 0 ; i < 1000 ; i++) { click({ srcElement: {index: Math.floor(Math.random() * 16)}}) } } ----
というふうに数字の並んだ table を作って行き、数字の書かれた枠をクリックしたら
関数 click を呼び出すというもの。
で、その中身はどうなっているかというと、頭だけ引用すると
----
function click(e) { var i = e.srcElement.index;
----
となっている。
でネットで散々調べた末に
「JavaScript - ブラウザ毎のイベント発生元取得テスト」
http://tsoft-web.com/sub/tips/event/
というページにたどりつき、「クリック後、大体こんな感じで取得」のサンプルページを
表示させ、「click me」と書かれた部分をクリックすると、
「e.srcElement = not exists」とあるではないか。
そこで上に引用した 15puzzle の2ヶ所の 'srcElement' を 'target' に
書き換えたところ、まともに動くようになった。
他のブラウザでもちゃんと動くようで解決した。
なお、srcElement にしか対応していないブラウザ上でも動かすには、上の一行を
var i = (e.srcElement ||e.target).index;
とすればよいようだ。
お役に立って何よりです。
投稿: wtz | 2017年5月26日 (金) 06時17分
同じところで躓いていたので助かりました。
この本はFirefoxでの動作確認をしてくれてないようですね…
投稿: JS入門中 | 2017年5月25日 (木) 23時46分