使用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 联系我们: