javascript - 在纯 JavaScript 中组合 DOM 事件

Question

我有一个带有伪 Canvas 的网页(请参阅 https://jsfiddle.net/memeladon/vff01jq6/ )。当用户将光标悬停在圆圈上(鼠标悬停事件)时，圆圈会随机改变颜色。如何修改程序，以便仅在单击鼠标左键且光标位于圆圈上(单击 + 鼠标悬停事件)时才改变颜色？目前我创建具有这样功能的单元格:

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
   }
});