2

我试图让这个 SO 问题中的示例代码在我的系统上运行

使用 jQuery 获取鼠标单击图像的 X/Y 坐标

它显示在 a 内单击时鼠标的位置div。它工作正常FirefoxSafari但没有更新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>

它现在适用于所有三种浏览器......所以出于某种原因,Chrome 是唯一一个抱怨 jquery.min.js 的 url 不安全的浏览器。使问题更加复杂的是,当我进入 JavaScript 控制台时,它并没有给我那个错误,直到我清除缓存打开 JavaScript 控制台后我才看到它。

4

1 回答 1

4

您得到的错误是执行脚本时未加载 jQuery。因此,当您尝试使用 $ 时,没有定义它。

此外,您的屏幕截图显示的标记与您的示例不同。

于 2013-03-10T23:15:33.540 回答