Как поймать левую кнопку мыши при наведении мыши?

Question

Я пытаюсь поймать, когда пользователь нажимает левую кнопку мыши при наведении курсора на ячейки в html-таблице с использованием vanilla javascript. Цель состоит в том, чтобы закрасить ячейку черным, когда пользователь щелкает мышью при перетаскивании (например, рисование, как в MsPaint, когда вы рисуете линию)

Я добавил прослушиватель событий «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

Спасибо всем за ваши добрые ответы.Предлагаемые коды работают почти нормально.Единственная проблема заключается в том, что иногда браузер показывает курсор 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 2

Разделите проблему на несколько частей. Я бы добавил mousedown и mouseup EventListener ко всему окну и установил бы глобальное состояние, если вы сейчас рисуете:

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 3

Вместо отслеживания при наведении курсора отслеживайте три события:

1. mousemove - для постоянного определения положения мыши
2. mousedown - для установки состояния мыши при текущем нажатии
3. mouseup - для установки состояния мыши в текущем состоянии

Это работает следующим образом:

1. handleMousemove постоянно обновляет положение мыши ипроверка состояния мыши
2. Когда мышь нажимается, handleMousedown срабатывает
3. handleMousedown устанавливает состояние как «вниз»
4. Когда handleMousemove видит эту мышьсостояние «вниз», оно запускает событие щелчка в текущей позиции мыши
5. Когда мышь отпущена, handleMouseup срабатывает
6. handleMouseup установить состояние как «освобождено» и всевозвращается в нормальное состояние

7. Повтор

   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 4

Не проще ли просто добавить слушателя для "клика"?Если щелкнуть элемент, он также находится над ячейкой.

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