时间戳

首页 > 解决方案 > 如何在鼠标悬停事件中捕捉鼠标左键？

javascript - 如何在鼠标悬停事件中捕捉鼠标左键？

问题描述

我试图捕捉用户在使用 vanilla javascript 将鼠标悬停在 html 表中的单元格上时按下鼠标左键。目的是当用户在拖动时用鼠标单击时将单元格绘制为黑色（例如在 MsPaint 中绘制，例如当您绘制一条线时）

我在表的每个 td 上添加了一个“over”事件侦听器，并使用按钮属性来检查是否按下了左键：

celle = document.getElementsByTagName("td");
for (i=0;i<celle.length;i++)
celle[i].addEventListener("mouseover", function(e){
if(e.buttons == 1 ){
    e.target.style.backgroundColor="black";
}
})

此代码有效，但并非总是如此，也不完美。首先它开始设置下一个元素的背景颜色，而不是我按下鼠标的那个。此外，有时它根本没有设置任何颜色（在 Chrome 的窗口中有一个小图标，如“访问被拒绝”）。它似乎非常随机且不可预测地工作。

我也尝试过使用 jQuery，但我发现了类似的问题。任何人都可以帮助我吗？非常感谢

标签： javascriptdom-events

解决方案

把问题分成几个部分。如果您当前正在绘制，我会在整个窗口中添加一个mousedown和事件监听器并设置一个全局状态：mouseup

var drawState=false
window.addEventListener("mousedown",function(e){
if(e.button===1){
   drawState = true;
}});

window.addEventListener("mouseup",function(e){
if(e.button===1){
   drawState = false;
}});

如果鼠标悬停在单元格上，您可以通过一些检查来改进窗口侦听器。

在此之后，您可以为所有单元格添加一个mouseenter侦听器。Mouseenter 仅在您进入单元格时触发，而不是在元素内的每次移动时触发：

celle[i].addEventListener("mouseenter", function(e){
   if(drawState){
      e.target.style.backgroundColor="black";
   }
})

推荐阅读