如何将鼠标指针更改为在 Javascript 中单击的图像答案

【问题标题】：How to change the mouse pointer to the image that was clicked on in Javascript如何将鼠标指针更改为在 Javascript 中单击的图像
【发布时间】：2018-10-12 02:58:02
【问题描述】：

我正在做一个植物生长模拟器来教孩子们种植植物。有一些关于更改指针的线程，例如： JavaScript how to change mouse cursor to an image? How to change the mouse pointer to an Image when clicked on it in c#

但是，关注点不同。我想要做的是让鼠标指针本身变成被点击的图像，所以它会给出这样的结果：

点击侧边栏中的铲子，鼠标指针变为铲子
然后孩子们点击他们想为他们的植物挖洞的地方，他们点击的地方就会出现土丘的图像
他们返回侧边栏并单击种子，鼠标指针将从铲子变为一袋种子

我不知道我是否应该尝试更改单击事件上的指针或使指针不可见并将所选图像的副本附加到它，因此我将不胜感激。

【问题讨论】：

请向我们展示您尝试过的代码.. Please Read How to
@CertainPerformance 我之前查过这个问题，但从我的看法来看并不完全相同。我编辑了原始问题以表明这一点。

标签： javascript image pointers events onclick

【解决方案1】：

要按需更改鼠标光标，您必须为相关元素添加点击监听器。例如：

const src = 'https://www.gravatar.com/avatar/2f2eaccac43433e0bdd0b9f795286423?s=32&d=identicon&r=PG&f=1';
const docStyle = document.body.style;
document.querySelector('img').addEventListener('click', () => {
  if (!docStyle.cursor) docStyle.cursor = `url('${src}'), default`;
  else docStyle.cursor = null;
});

div {
  height: 300px;
  background-color: green;
}

<div>
  <img src="https://www.gravatar.com/avatar/2f2eaccac43433e0bdd0b9f795286423?s=32&d=identicon&r=PG&f=1">
</div>

【讨论】：

是的。谢了。我将它应用于原始示例，它运行良好 (jsfiddle.net/r9Lbmhxv/2) 以确保我理解。然后，我尝试对本地图像做同样的事情，但它不起作用。 const src = 'images/Shovel.png'; const docStyle = document.body.style; document.querySelector('img').addEventListener('click', () => { if (!docStyle.cursor) docStyle.cursor = url('${src}'), 默认; else docStyle.cursor = null; });
doesn't work 含糊不清，无法调试 - 如您所见，代码在 sn-p 和 fiddle 中都很好
更准确地说，我正在调用本地图像，所以我想知道我是否在我的代码中错误地引用了它，因此为什么代码不起作用或它没有任何作用区别？ const src = 'images/Shovel.png'
这是正确的语法。 images 应该是基目录的子目录。您可以查看浏览器的网络选项卡以查看请求的去向，并将其与您的文件系统结构进行比较。您还可以查看 HTML 中的 <img src="images/Shovel.png"> 会发生什么。
我在我的 HTML 中看到了图像，但是当我查看“网络”选项卡时，单击时没有任何反应。我更新了代码 (jsfiddle.net/r9Lbmhxv/3) 并将原始 img 替换为我正在使用的图像。我可以看到图像，但是当我单击它时，指针保持不变。我认为它与格式无关，但我仍然无法理解原因。

【解决方案2】：

在 JS 中，只需这样做：

document.body.style.cursor = "url([url]), pointer"

例如：

document.body.style.cursor = "url(http://bringerp.free.fr/Files/RotMG/cursor.gif), pointer"

要替换为默认光标，请将光标样式更改为空：

document.body.style.cursor = ""

【讨论】：

我尝试了您的建议，它奏效了 (jsfiddle.net/r9Lbmhxv)，但事实并非如此。我的意思是我从默认鼠标指针开始，然后当我单击顶部框时，指针变为框并且我不再看到箭头。我希望这更清楚。我以插入类似花园游戏的链接为例：girlgames4u.com/vegetable-garden-game.html（需要 Flash，抱歉）
最好的办法是将光标设置为铲子的图像。尽管我尽了最大的努力，当拖动 html 框时，我无法让那个该死的“不允许”光标消失。（i.imgur.com/VXo6K1D.png）。只需使用 mousedown 和 mouseup 事件来控制它。