Will "mousedown" and "mousemove" change the cursor icon and how to prevent it?
I have a little sketch application. We can press down the mouse and paint something.
When mousedown and mouseenter event happens to a cell, it change the color. But this combination is somehow similar to drag. Sometime this "little earth" icon appears, and then mouseup event will be swollen. Anyone knows where does this "little earth icon" come from?
I've already set the cell.draggable = false. No drag event is fired.
Here's my code to reproduce the bug. It's very rare, maybe 1/20 to 1/50 of chance. Click first the create canvas button than you can paint.
/* 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;
}
Create canvas