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

Предположим, что у нас есть простой код 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...

Так вот, кто-нибудь сталкивался с такой же бедой? Возможно, есть обходной путь для этого?

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


jquery css webkit onmousemove mouse-cursor
person Lyubomyr Shaydariv    schedule 30.11.2010    source источник
comment
Проверено в Chrome 7.0.517.44. Конечно, заметили это раньше, и это раздражает.   -  person Orbling    schedule 30.11.2010

Ответы (4)


arrow_upward
8
arrow_downward

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

person Martin Jespersen    schedule 12.01.2011
comment
Есть ссылка на запись об ошибке? Не удалось найти, и я хотел бы отметить его звездочкой. - person Jonatan Littke; 28.02.2011
comment
Ищите ошибку изменения курсора webkit и тому подобное, вы найдете много. Один из них находится здесь: code.google.com/p/chromium/ проблемы/подробности?id=26723 - person Martin Jespersen; 28.02.2011

arrow_upward
1
arrow_downward

У меня была эта проблема с использованием 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), это не будет соблюдать декларацию.

person George    schedule 12.05.2011
comment
Привет, Джордж. Спасибо за ответ. В Google Chrome Canary Build 13.x.x.x эта проблема уже устранена. - person Lyubomyr Shaydariv; 12.05.2011

arrow_upward
1
arrow_downward

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

arrow_upward
0
arrow_downward

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

Кажется, курсор меняется, если вы заставляете браузер перекомпоновываться. Итак, если вы установите курсор на 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;
    });
});
person Pablo Montilla    schedule 01.11.2017