仅当 mousedown && mouseover 为真时触发的事件侦听器

Question

我发现了很多和我类似的问题和答案。不幸的是，我试图调整这些答案来解决我的问题，但我无法让它发挥作用。我正在制作绘图板应用程序。绘图板由一个装满 div 的容器组成。我希望只有当 mousedown 和 mouseover 都为真时颜色才会改变。基本上，我想点击并拖动我的绘图线。我可能要出去吃午饭了，但我已经筋疲力尽了。

let boxes = document.getElementsByClassName("grid-item");
let isClicked = false;
let isHover = false;

for (box of boxes) {
  box.addEventListener("mousedown", () => isClicked = true);
}
for (box of boxes) {
  box.addEventListener("mouseover", () => isHover = true);
}

function draw() {
  if (isClicked == true && isHover == true) {
    box.target.style.background_color = "black";
  }
}

Answer 1

您可以使用传递的事件对象，而不是试图管理和跟踪全局变量。在我的例子中，我有一个函数可以通过改变背景颜色使事件目标变黑。我确实使用了 style.backgroundColor 因为 style.background-color 对于 js 是不正确的。如果触发了 mousedown 事件，您可以安全地假设光标在元素上。鼠标悬停事件并不总是使目标变黑。相反，我检查事件属性 .buttons 如果按下鼠标左键则为 1，否则为 0。这样，我可以验证它是否被点击，然后我们将事件传递给我们的 make black 函数。

可以通过跟踪全局变量来解决这个问题，但是您需要进行大量“状态管理”，这很快就会变得混乱和复杂。您需要一个关闭 isHover 的 mouseout 函数，以及一个关闭 isClick 的 mouseup 函数。如果由于右键单击或光标处于不同位置而未触发 mouseout 或 mouseup 事件，您可能需要一些去抖动。然后你还需要跟踪哪个元素 isHover 和 isClick 在这种情况下是多余的，因为我们可以从我们的鼠标悬停事件中检查事件对象。

const boxes = [...document.getElementsByClassName("grid-item")];
const makeBlack = event => event.target.style.backgroundColor = "black";
function equip(box) {
  box.addEventListener("mousedown", makeBlack);
  box.addEventListener("mouseover", event => {
    if (event.buttons == 1) makeBlack(event);
  });
}
boxes.forEach(equip);

仅当 mousedown && mouseover 为真时触发的事件侦听器

event listener that fires only when mousedown && mouseover are true

javascript

mouseevent