Question

当用户使用香草javascript将鼠标悬停在html表中的单元格上时，我试图抓住用户按下鼠标左键的问题。目的是当用户在拖动时用鼠标单击时将其涂成黑色（例如，在MsPaint中绘制，例如绘制一条线）

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

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

Answer 2

代替跟踪鼠标悬停，而是跟踪三个事件：

mousemove-不断获取鼠标位置
mousedown-将鼠标状态设置为当前单击的状态
mouseup-将鼠标状态设置为当前释放的状态

它是这样工作的：

handleMousemove不断更新鼠标位置并检查鼠标状态
点击鼠标时，handleMousedown被触发
handleMousedown将状态设置为“关闭”
handleMousemove看到鼠标状态为“按下”时，会在当前鼠标位置触发点击事件
释放鼠标时，handleMouseup被触发
handleMouseup将状态设置为“已释放”，一切恢复正常

重复

var mouseIsDown = false;
var mousePosition = { x:-1, y:-1 };

let handleMousemove = (event) => {
    // get the mouse position
  mousePosition.x = event.x;
  mousePosition.y = event.y;
  if(mouseIsDown) // if mouse state is currently down, fire click at mouse position
  {
    let elem = document.elementFromPoint(mousePosition.x, mousePosition.y);
    // you can add some conditions before clicking
    if(something)
    {
      elem.click();
    }
  }
};

let handleMousedown = (event) => {
    mouseIsDown = true;
  // set the mouse state as 'down'
};

let handleMouseup = (event) => {
    mouseIsDown = false;
  // set the mouse state as 'release'
};

document.addEventListener('mousemove', handleMousemove);
document.addEventListener('mousedown', handleMousedown);
document.addEventListener('mouseup', handleMouseup);

正在工作的小提琴：https://jsfiddle.net/Black3800/9wvh8bzg/5/

Answer 3

感谢大家的友好回答。建议的代码几乎可以正常工作。唯一的问题是，有时浏览器显示NO SYMBOL光标。不幸的是，我无法发布图片，但是您可以在这里找到它：

NO Symbol

要保持绘制状态，唯一的方法是在表格外部单击，然后在内部再次单击。

这是我的代码：

var mouseIsDown = false;
var mousePosition = { x:-1, y:-1 };

let handleMousemove = (event) => {
    // get the mouse position
  mousePosition.x = event.x;
  mousePosition.y = event.y;
  if(mouseIsDown) // if mouse state is currently down, fire click at mouse position
  {
    let elem = document.elementFromPoint(mousePosition.x, mousePosition.y);
    // you can add some conditions before clicking
    if (event.buttons==1)
    {
      elem.click();
    }
  }
};

let handleMousedown = (event) => {
    mouseIsDown = true;
  // set the mouse state as 'down'
};

let handleMouseup = (event) => {
    mouseIsDown = false;
  // set the mouse state as 'release'
};

document.addEventListener('mousemove', handleMousemove);
document.addEventListener('mousedown', handleMousedown);
document.addEventListener('mouseup', handleMouseup);

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

Answer 4

为“ click”添加侦听器难道不是很容易吗？如果单击该元素，它也会在单元格上方。

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

如何在鼠标悬停事件上捕获鼠标左键？

4 个答案: