Проблемы с ручным курсором на холсте html5

Question

Я играю с html5 и некоторым javascript, чтобы сделать небольшой блокнот. Всякий раз, когда я нажимаю на холст в Chrome, курсор становится текстовым курсором. Я попытался поместить курсор: рука в CSS, но это не похоже на работу. Это должно быть легко, но я смотрю на это и нигде не могу его найти

Answer 1

Используйте отключение выделения текста на холсте. Это работает как шарм.

var canvas = document.getElementById('canvas');
canvas.onselectstart = function () { return false; } // ie
canvas.onmousedown = function () { return false; } // mozilla

Ура, Kris

Answer 2

В то время как другие парни были абсолютно неравнодушны к тому, чтобы направить вас к справке о режиме quirksmode, это не решит проблему, с которой вы столкнулись, и, по сути, вам нужно реализовать вариант ответа Криса.

В моей собственной реализации я обнаружил, что предотвращение поведения по умолчанию в событии mousedown - это все, что требовалось для остановки этого надоедливого курсора выделения текста:

function handleMouseDown(evt) {
  evt.preventDefault();
  evt.stopPropagation();

  // you can change the cursor if you want
  // just remember to handle the mouse up and put it back :)
  evt.target.style.cursor = 'move';

  // rest of code goes here
}

document.addEventListener('mousedown', handleMouseDown, false);

Надеюсь, это поможет.

Ура, Damon.

Answer 3

Вместо этого используйте pointer для вашего свойства курсора, например:

canvas { cursor: pointer; }

hand зависит от IE / Opera, вы можете увидеть полный список того, какие курсоры работают в каких браузерах .