Изменят ли «mousedown» и «mousemove» значок курсора и как это предотвратить? ⇐ CSS

[Anonymous]

У меня есть небольшое приложение для создания эскизов. Мы можем нажать кнопку мыши и нарисовать что-нибудь.
Когда с ячейкой происходят события mousedown и mouseenter, она меняет цвет. Но эта комбинация чем-то похожа на перетаскивание. Иногда появляется значок «землянки», и тогда событие mouseup становится опухшим. Кто-нибудь знает, откуда взялся этот «значок маленькой земли»?


Я уже установил cell.draggable = false. Событие перетаскивания не запускается.
Вот мой код, воспроизводящий ошибку. Это очень редко, возможно, от 1/20 до 1/50 шанса. Сначала нажмите кнопку «Создать холст», а затем приступайте к рисованию.

Код: Выделить всё

/* create grids in canvas */
const initCanvas = function() {
const canvas = document.querySelector('.canvas');
/* clear old canvas if any */
canvas.innerHTML = '';
/* create new canvas */
let row = parseInt(document.querySelector('textarea.canvasRow').value);
let column = parseInt(document.querySelector('textarea.canvasColumn').value);
if (!row || !column) return;
canvas.style['grid-template-columns'] = `repeat(${column}, 1fr)`;
canvas.style['grid-template-rows'] = `repeat(${row}, 1fr)`;
for (let i = 0; i < (row * column); i++) {
let cell = document.createElement('div');
cell.classList.add('cell');
cell.addEventListener('mousedown', draw, false);
cell.addEventListener('mouseenter', draw, false);
canvas.appendChild(cell);
}
}

/* mousedown event handler on canvas */
const toDraw = function(e) {
isDrawing = true;
}

/* mousemove event handler on each cell */
const draw = function(e) {
if (isDrawing) {
this.style['background-color'] = color;
}
}

/* mouseup event handler on whole document */
const stopDrawing = function(e) {
isDrawing = false;
e.stopPropagation();
}

/* variables */
let color = 'black';
let isDrawing = false;
/* canvas init */
const initCanvasBtn = document.querySelector('.initCanvas');
initCanvasBtn.addEventListener('click', initCanvas);
/* draw */
const canvas = document.querySelector('.canvas');
canvas.addEventListener('mousedown', toDraw, true); // capture must be true. canvas must turn on "isDrawing" before cell capture the mousedown event.
document.addEventListener('mouseup', stopDrawing, true); // document element handle this. no need to notify children.

Код: Выделить всё

textarea.canvasRow,
textarea.canvasColumn {
width: 4rem;
height: 1rem;
}

.initCanvas {
width: 4rem;
height: 2rem;
border: 1px solid black;
}

.canvas {
height: 50vw;
width: 50vw;
border: 1px solid black;
display: grid;
}

.cell {
background-color: #f5f5f5;
border: 1px solid #ebebeb;
}

Код: Выделить всё

16
16
Create canvas

Подробнее здесь: https://stackoverflow.com/questions/710 ... prevent-it