Блог

Я создаю создатель пиксельной графики и могу раскрашивать отдельные элементы в своей сетке; однако я хочу, чтобы пользователь мог нажимать, удерживать и перетаскивать для непрерывного рисования. У меня были похожие вопросы, но они, похоже, нуждались в jQuery или не совсем ко мне относились.

https://jsfiddle.net/8okf4yg0/2/

 //create cell listeners
function listenCells() {
    let cell = document.querySelectorAll('.grid-square');
    cell.forEach((cell) => {
        cell.addEventListener('mouseenter', function() {
            cell.style.backgroundColor = color;
        });
    });
}
  

есть ли какой-нибудь способ объединить mouseenter и mousedown? Или есть лучшее решение?

Добавьте прослушиватели mousedown и mouseup в родительский контейнер и попросите их переключить переменную флага.

Затем проверьте этот флаг перед изменением ячеек.

Простая демонстрация с использованием таблицы

 /* Flag to know if mosue is down on table */
let MDOWN = false;

const tbl = document.querySelector('table')
createRows();


['mousedown', 'mouseup'].forEach(eName => tbl.addEventListener(eName, () => MDOWN = !MDOWN));

function cellEnter() {
  if (MDOWN) {
    this.style.backgroundColor = 'black';
  }
}

function createRows() {
  for (let i = 0; i < 50; i  ) {
    const row = tbl.insertRow()
    for (let j = 0; j < 50; j  ) {
      let cell = row.insertCell();
      cell.addEventListener('mouseenter', cellEnter)
    }
  }
}  

 td {
  height: 10px;
  width: 10px;
  border: 1px solid #ccc
}

table {
  border-collapse: collapse;
}  

 <table>

</table>