仅当 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

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

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

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