Почему мой курсор превращается в значок блока при нажатии мыши?

В настоящее время я выполняю проект etch-a-sketch из проекта Odin и сталкиваюсь с проблемой, когда мой курсор иногда превращается в значок блока, когда я щелкаю и перетаскиваю мышь по сетке рисования. В настоящее время у меня есть переменная isPainting, которая действует как логическое значение для рисования на сетке, true при наведении мыши и false при наведении мыши.

Кнопки ниже в настоящее время не работают, так как я был больше сосредоточен на том, чтобы заставить рисунок работать. Прикреплен мой код html, css и javascript.

let isPainting = false;
document.body.onmousedown = () => (isPainting = true);
document.body.onmouseup = () => (isPainting = false );

function populatePage(size){
let board = document.querySelector(".board");
let squares = board.querySelectorAll("div");
squares.forEach((div) => div.remove());
board.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
board.style.gridTemplateRows = `repeat(${size}, 1fr)`;

let amount= size * size;
for(var i = 0; i < amount; i++){
    let square = document.createElement('div')
    square.addEventListener('mouseover',colorSquare);
    square.addEventListener('mousedown',colorSquare);
    square.style.backgroundColor = 'grey';
    board.insertAdjacentElement('beforeend',square);
   }
}


function colorSquare(e){
    if(isPainting){
        this.style.backgroundColor = 'black';
    }
}

populatePage(16);
.board{
    width: 500px;
    height:  500px;
    display: grid;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel = "stylesheet" href="styles.css">
    <link rel = "stylesheet" href="normalize.css">
    <title>Etch-a-Sketch</title>
</head>
<body>
    <div class="flex-container">
<div class="header">
    <h1>Etch a Sketch</h1>
    <h2></h2>
</div>
<div class="content">
    <div class="board"></div>
        <div class="buttons">
        <button>Black</button>
        <button>Erase</button>
        <button>Random</button>
        <button>Reset</button>
    </div>
</div>
<button>Set Size</button>
</div>
</body>
<script src="main.js"></script>
</html>

Ожидаемый результат: пользователь может рисовать на сетке etch-a-sketch только тогда, когда кнопка мыши удерживается нажатой и перемещается по сетке. Рисование остановится, как только кнопка мыши будет отпущена.

Фактический результат: иногда, когда мышь удерживается и движется, курсор превращается в значок «блок», и рисование останавливается или продолжает рисовать, несмотря на то, что кнопка мыши уже нажата.

3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
4
0
49
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Нажатие мыши, за которым следует перемещение мыши, может привести к событию перетаскивания, в данном случае, когда вы пытаетесь щелкнуть по уже окрашенному черному квадрату, а затем переместить мышь.

Курсор not-allowed, который вы видите, является результатом срабатывания этого события и попытки браузера интерпретировать, что делать с тем, что вы «перетаскиваете». Если вы preventDefault в событии mousedown, событие перетаскивания больше не создается, и поэтому курсор not-allowed не появляется.

Соответствующий код:

    document.body.onmousedown = (e) => {
      isPainting = true; 
      e.preventDefault();
    };

let isPainting = false;
document.body.onmousedown = (e) => {
  isPainting = true; 
  e.preventDefault();
};
document.body.onmouseup = () => (isPainting = false );

function populatePage(size){
let board = document.querySelector(".board");
let squares = board.querySelectorAll("div");
squares.forEach((div) => div.remove());
board.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
board.style.gridTemplateRows = `repeat(${size}, 1fr)`;

let amount= size * size;
for(var i = 0; i < amount; i++){
    let square = document.createElement('div')
    square.addEventListener('mouseover',colorSquare);
    square.addEventListener('mousedown',colorSquare);
    square.style.backgroundColor = 'grey';
    board.insertAdjacentElement('beforeend',square);
   }
}


function colorSquare(e){
    if(isPainting){
        this.style.backgroundColor = 'black';
    }
}

populatePage(16);
.board{
    width: 500px;
    height:  500px;
    display: grid;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel = "stylesheet" href="styles.css">
    <link rel = "stylesheet" href="normalize.css">
    <title>Etch-a-Sketch</title>
</head>
<body>
    <div class="flex-container">
<div class="header">
    <h1>Etch a Sketch</h1>
    <h2></h2>
</div>
<div class="content">
    <div class="board"></div>
        <div class="buttons">
        <button>Black</button>
        <button>Erase</button>
        <button>Random</button>
        <button>Reset</button>
    </div>
</div>
<button>Set Size</button>
</div>
</body>
<script src="main.js"></script>
</html>

Спасибо @Liftoff! Недопустимый курсор больше не появляется. Я не знал о функции preventDefault. Я ценю, что ты помог мне с этим.

LatexPanther 24.04.2022 00:53

Другие вопросы по теме