使用canvas和body元素的奇怪游标行为

[英]strange cursor behaviour with canvas and body element


I have a html document containing some javascript code and a canvas element.

我有一个包含一些javascript代码和canvas元素的html文档。

In the javascript bit, I'm using the following code to hide the mouse pointer:

在javascript位中,我使用以下代码隐藏鼠标指针:

document.body.style.cursor = 'none';

And something really strange happens: the mouse pointer is hidden only when the mouse is over the canvas element, but is visible when the mouse is over the rest of the body.

并且发生了一些非常奇怪的事情:只有当鼠标位于画布元素上方时鼠标指针才会隐藏,但当鼠标位于正文的其余部分时,鼠标指针会被隐藏。

I've tested this in Firefox 41 and Chrome 46. Exact same thing.

我已经在Firefox 41和Chrome 46中对此进行了测试。完全相同。

Does anybody know why this could be happening, and how it can be prevented?

有谁知道为什么会发生这种情况,以及如何预防?

To give some more context info: I'm making an interactive page, where the user first needs to click on some buttons with the mouse (so the mouse pointer needs to be visible initially), and then there's a period where interaction happens only by pressing keys, and the mouse pointer is distracting, so I want to make it disappear. Then after that, I need to resurrect the mouse pointer so the user can click on buttons again.

为了提供更多的上下文信息:我正在制作一个交互式页面,用户首先需要用鼠标点击一些按钮(所以鼠标指针最初需要看到),然后有一段时间只能通过按键,鼠标指针分散注意力,所以我想让它消失。然后,我需要恢复鼠标指针,以便用户可以再次单击按钮。

Thanks!

2 个解决方案

#1


0  

CSS

Have you considered using * { cursor: none; } in your CSS, it should remove the cursor off the whole screen in the browser window but I'm not sure why you want to do this.

你考虑过使用* {cursor:none;在你的CSS中,它应该在浏览器窗口中将光标移出整个屏幕,但我不确定你为什么要这样做。

Fiddle - https://jsfiddle.net/0wh4rcyb/

小提琴 - https://jsfiddle.net/0wh4rcyb/

#2


0  

This is because your <body> only has the height of your canvas element+ margins :

这是因为你的只有canvas元素+ margin的高度:

document.body.style.cursor = 'none';
body{border: 1px solid;}
canvas {
    background: #000;
}
<canvas></canvas>

you can solve this by setting the width and height of your body to 100vw and 100vh :

你可以通过将身体的宽度和高度设置为100vw和100vh来解决这个问题:

document.documentElement.style.cursor = 'none';
body{
    height: 100vh;
    width: 100vw;
}
html, body{
    margin: 0
}
canvas {
    background: #000;
}
<canvas></canvas>


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2015/11/08/b2575f852792354b2c19a3065d8ca69f.html



 
  © 2014-2022 ITdaan.com 联系我们: