2

システムで実行されているこのSOの質問のサンプルコードを取得しようとしています

jQueryを使用して画像をマウスでクリックしたときのX/Y座標を取得する

内をクリックすると、マウスの位置が表示されますdiv。正常に動作しますがFirefox、Safari更新されませんChrome。何か間違ったことをしたのではないかと思います。Google Chrome バージョン 23.0.1271.101 を使用しています

これが私が使用しているコードです。

<html>

<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>

<body>
<p>Click to see the position!</p>
<div class="box" style="width: 200px; height: 200px; background: #F00">&nbsp;</div>
<p id="position">Position will go here</p>
<script>
$(document).ready(function() {
    $('.box').click(function(e) {
        var offset = $(this).offset();
        $('#position').html(Math.round(e.clientX - offset.left) + ", " + Math.round(e.clientY - offset.top));
    });
});
</script>

</body>
</html>

更新: Chrome の JavaScript コンソールに表示されるエラーは次のとおりですが、Uncaught ReferenceError: $ is not definedどうすればよいかわかりません。

ここに画像の説明を入力

アップデート2:

JavaScript コンソールを開いた状態でブラウザのキャッシュをクリアし、ページをリロードすると、見たことのないエラーに気付きました

[blocked] The page at https://<mywebsite>/index.html ran insecure content from http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js.
Uncaught ReferenceError: $ is not defined

そこで、ダウンロードjquery.min.jsして同じディレクトリに配置しindex.html、スクリプトのロードを次のように変更しました

<script src="./jquery.min.js" type="text/javascript"></script>

3 つのブラウザすべてで動作するようになりました....何らかの理由で、jquery.min.js の URL が安全でないと文句を言ったのは Chrome だけでした。問題をさらに悪化させたのは、JavaScript コンソールに入ったときにそのエラーが表示されず、キャッシュをクリアして JavaScript コンソールを開くまでエラーが表示されなかったことです。

4

1 に答える 1

4

発生するエラーは、スクリプトの実行時にjQueryがロードされないことです。したがって、$を使用しようとすると、$は定義されません。

また、スクリーンショットには例と同じマークアップが表示されていません。

于 2013-03-10T23:15:33.540 に答える