Курсор мыши не меняется, если указатель не перемещается в браузерах на основе 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

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

У меня была эта проблема при использовании 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;

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

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

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;
    });
});