curseur de la souris ne change pas si un pointeur ne se déplace pas dans les navigateurs basés sur Webkit

Question

Supposons que nous avons simplement le code jQuery comme suit:

var $document = $(document); 
$document.ready(function() { 
    var $test = $("#test"); 
    $document.keydown(function(e) { 
     e.shiftKey && $test.css("cursor", "pointer"); 
    }); 
}); 

Le problème est que WebKit ne change pas le curseur de la souris bloc #test si le pointeur de la souris est déplacé sur le bloc #test, la touche Maj est enfoncée puis. Mais dès que vous déplacez le curseur, Chrome et Safari modifient le style du curseur en pointer - exactement comme prévu, mais sans déplacement de la souris. Ce bug (?) N'est pas pertinent pour Firefox, et je ne l'ai pas vérifié sous Internet Explorer et Opera ...

Alors, quelqu'un a-t-il eu l'expérience du même problème? Peut-être, y a-t-il une solution de rechange pour cela?

Merci d'avance.

Answer 1

Ceci est un bug bien connu dans le moteur webkit, et il n'y a pas de véritable solution de contournement pour cela.

Answer 2

J'ai eu ce problème en utilisant Chromium 11.0.696.65. J'ai réussi à le résoudre avec un peu de retard sur JavaScript. J'essayais de faire un signe électronique consistant en un grand écran LCD piloté par un petit ordinateur industriel sans disque exécutant Chromium sur Ubuntu. Au démarrage, il exécute quelque chose comme:

chromium-browser --kiosk 'http://server:4662/1920x1080/status.html?id=42' 

La page téléchargée a une boucle d'interrogation XHR qui reçoit un objet JavaScript littéral chaque fois quoi que ce soit les changements relatifs à id=42, au cours de laquelle, il met à jour l'affichage de façon appropriée. Il y a CSS spécifiant que tous les éléments doivent avoir un pointeur de souris vide.

Le problème était que le pointeur de la souris de la requête en cours de Chrome était resté assis sur l'écran. Il a disparu dès que j'ai déplacé la souris. Cependant, le vrai signe n'aura pas une souris attachée, encore moins un utilisateur pour le déplacer.

I ajouté le script suivant:

function $(id) {return document.getElementById(id);} 

function onLoad() 
{ 
    window.setTimeout(hideCursor, 1000); 

    function hideCursor() { 
     $('content').style.cursor = 'url(/blankCursor.gif),auto'; 
    } 
} 

window.onload = onLoad; 

Maintenant, le curseur gênant apparaît brièvement au démarrage, mais disparaît dans une seconde. Ensuite, le signe s'exécute sans curseur jusqu'au prochain démarrage (jours ou semaines).

BTW, le ,auto semble être un autre bug de chrome. J'ai trouvé si je viens de mettre url(/blankCursor.gif), il ne respectera pas la déclaration.

Answer 3

Contrairement à ce qui a été dit précédemment, cette solution de contournement trouvée par David Becker semble être efficace. (Les correctifs pour les navigateurs sont dans le tuyau. Voir https://bugs.webkit.org/show_bug.cgi?id=101857)

function _repaintCursor() { 
    var saveCursor = document.body.style.cursor, 
     newCursor = saveCursor ? "" : "wait"; 
    _setCursor(newCursor); 
    _setCursor(saveCursor); 
} 

function _setCursor(cursor) { 
    var wkch = document.createElement("div"); 
    var wkch2 = document.createElement("div"); 
    wkch.style.overflow = "hidden"; 
    wkch.style.position = "absolute"; 
    wkch.style.left = "0px"; 
    wkch.style.top = "0px"; 
    wkch.style.width = "100%"; 
    wkch.style.height = "100%"; 
    wkch2.style.width = "200%"; 
    wkch2.style.height = "200%"; 
    wkch.appendChild(wkch2); 
    document.body.appendChild(wkch); 
    document.body.style.cursor = cursor; 
    wkch.scrollLeft = 1; 
    wkch.scrollLeft = 0; 
    document.body.removeChild(wkch); 
} 

Answer 4

que j'ai trouvé une solution au problème.

Il semble que le curseur soit changé si vous forcez le navigateur à se refaire. Donc, si vous positionnez le curseur sur elem puis appelez elem.scrollTop (ou n'importe quel nombre de propriétés qui déclenchent une refusion), le curseur se mettra à jour en place.

Donc, dans votre cas, le code finirait par être:

var $document = $(document); 
$document.ready(function() { 
    var $test = $("#test"); 
    $document.keydown(function(e) { 
     e.shiftKey && $test.css("cursor", "pointer"); 
     $test[0].scrollTop; 
    }); 
});