当鼠标空闲时强制 Chrome 光标更新原版 JavaScript

Force Chrome cursor update when mouse-idling vanilla javascript

本文关键字：光标 Chrome 更新 原版 JavaScript 鼠标      更新时间：2023-09-26

我有一个与此链接相关的类似问题：

https://code.google.com/p/chromium/issues/detail?id=26723

当出现新的div 并且鼠标不移动时，光标不会在 Chrome 40 中更新。Chrome 问题列出了一些解决方法，但我无法让它们与我的代码一起使用。还有一些堆栈溢出问题列出了这个问题，但他们没有用vanilla javascript修复这个特殊情况。

.HTML：

<div id ="d">
    Hello
</div>

.CSS：

div#d {
    width: 100px;
    height: 100px;
    background-color: red;
}
div.curs {
    cursor: pointer;
    height: 80px;
    background-color: grey;
}

.JS：

setTimeout(function(){
    var div = document.getElementById('d');
    div.innerHTML = div.innerHTML + '<div class="curs">World</div>';    
}, 5000);

对于这种特殊情况，最简单的原版javascript解决方法是什么？

小提琴 ： http://jsfiddle.net/2zh90st6/

在 Google Chrome v42 上，您可以通过更改当前光标下方元素的光标样式或此元素的任何祖先来计划光标更新。请注意，在新元素添加到 DOM 后，光标样式必须更改。

var container, overlay;
container = document.getElementById('container');
setTimeout(function() {
  overlay = document.createElement('div');
  overlay.id = 'overlay';
  container.appendChild(overlay);
  // Change container cursor from 'auto' to 'default',
  // to schedule cursor update while hovering overlay
  container.style.cursor = 'default';
}, 5000);
#container {
  position: relative;
  padding: 10px;
  cursor: auto;
  background: #7FDBFF;
  color: #001F3F;
  width: 100px;
  height: 100px;
}
#overlay {
  cursor: pointer;
  width: 100px;
  height: 100px;
  background: #001F3F;
  color: #7FDBFF;
  position: absolute;
  top: 10px;
  left: 10px;
}
<div id="container">
  Hover me and wait for a dark overlay.
</div>

您链接到的 chromium 问题，问题 26723：鼠标空闲时鼠标光标不会更改，目前似乎非常活跃，因此希望这种解决方法不会长期存在。

嗯，

这很有趣。无论哪种方式，触发正文光标的变化，似乎都可以在Chrome v42中解决问题：

setTimeout(function(){
    var div = document.getElementById('d');
    div.innerHTML = div.innerHTML + '<div class="curs">World</div>';    
    document.body.style.cursor = 'default';
}, 5000);
相关文章：