Объединение DOM-событий в чистом JavaScript

Question

У меня есть веб-страница с псевдо-холстом (см. https://jsfiddle.net/memeladon/vff01jq6/). Круги случайным образом меняют свой цвет, когда пользователь наводит на них курсор (событие наведения мыши). Как я могу изменить программу так, чтобы цвета менялись только при щелчке левой кнопкой мыши и наведении курсора на круг (события click + mouseover)? В настоящее время я создаю ячейки с такой функцией:

function createCell() {
    var new_cell = document.createElement("DIV"),
        cell_circle = document.createElement("DIV");
    new_cell.classList.add("paint-cell");
    cell_circle.classList.add("paint-cell__circle");
    new_cell.appendChild(cell_circle);
    new_cell.addEventListener("mouseover",  function () { changeColor(cell_circle); });
    return new_cell;
}

Answer 1

Вы можете использовать объект события мыши в функции обратного вызова и посмотреть, нажата ли кнопка мыши

new_cell.addEventListener("mouseover",  function (e) { 
   if(e.buttons !== 0)
   {
     //do cool stuff
   }
});