javascript - 如何捕获鼠标悬停事件上的鼠标左键？

Question

当用户将鼠标悬停在使用 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，但发现了类似的问题。有人可以帮助我吗？ 非常感谢

Answer 1

将问题分成几个部分。我将向整个窗口添加一个 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";
   }
})