курсор мыши не меняется, если указатель не перемещается в Webkit на основе браузеров

Question

Предположим, что мы имеем простой JQuery код вроде следующего:

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

Проблема заключается в том, что WebKit не меняет #test блочный курсор мыши если указатель мыши перемещается по блоку #test, а затем нажата клавиша Shift. Но как только вы перемещаете курсор, Chrome и Safari меняют стиль курсора на pointer - точно так, как ожидается, но без перемещения мыши. Эта ошибка (?) Не относится к Firefox, и я не проверял ее в Internet Explorer и Opera ...

Итак, у кого-нибудь был опыт с той же проблемой? Возможно, есть ли обходной путь?

Заранее спасибо.

Answer 1

Это хорошо известная ошибка в двигателе webkit, и для этого нет никакого обходного пути.

Answer 2

У меня была эта проблема с использованием Chromium 11.0.696.65. Я смог решить проблему с небольшим отложенным JavaScript.

Я пытался сделать электронный знак, состоящий из большого ЖК-монитора, управляемого небольшим бездисковым промышленным компьютером, работающим на Chromium на Ubuntu. На запуске, он работает что-то вроде:

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

Загруженный страница имеет цикл опроса XHR, который принимает JavaScript объект буквенные всякий раз, когда изменения, касающиеся что-нибыдь id=42, в это время, он обновляет дисплей соответствующим образом. Существует CSS, указывающий, что все элементы должны иметь пустой указатель мыши.

Проблема была в том, что указатель мыши на продвигаемом этапе Chrome остался сидящим на экране. Он исчез, как только я переместил мышь. Тем не менее, у реального знака не будет привязана мышь, а тем более пользователь может переместить его.

Я добавил следующий скрипт:

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

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

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

window.onload = onLoad; 

Теперь раздражает курсор показывает на короткое время при запуске, но исчезает в секунду. Затем знак бежит без клавиатуры до следующего запуска (дни или недели).

BTW, ,auto, по-видимому, является еще одной ошибкой Chromium. Я нашел, если я просто положил url(/blankCursor.gif), он не будет соблюдать декларацию.

Answer 3

Вопреки тому, что было сказано ранее, это обходное решение, которое я нашел у Дэвида Беккера, кажется эффективным. (Исправления для браузеров в трубе. См 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

Я нашел обходной путь к этой проблеме.

Кажется, что курсор изменен, если вы заставите браузер перепланировать. Итак, если вы установите курсор на elem, а затем вызовите elem.scrollTop (или любое количество свойств, которые активируют оплату), курсор будет обновляться на месте.

Так что в вашем случае код будет в конечном итоге:

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