Есть ли в javascript способ определить, когда я наведу курсор мыши на один и тот же элемент, а когда на другой?

#javascript

Вопрос:

У меня есть переменная времени, которая обновляется, и я хочу перезапустить ее значение только при наведении курсора мыши на другой элемент, если вы наведете курсор на тот же элемент, он должен продолжать обновляться. Как мне подойти к этому? Вот часть кода:

 // Change shaders
function changeShader() {
  const elements = document.querySelectorAll('.caption');

  elements.forEach(element => {
    element.addEventListener('mouseover', function() {

      if (you hovered on the same element) {
        console.log('you moused over the same element');
      } else {
        console.log('you moused over on a different element');
      }
    });
  });
}

1. Прежде чем ваш курсор переместится на другой элемент, он уже покинул бы предыдущий элемент. Так что я не совсем уверен, что вы пытаетесь здесь сделать. Можете ли вы дать нам конкретную реализацию логики, которую вы пытаетесь написать? Для меня это похоже на проблему XY.

2. @Terry извините за мое ужасное объяснение. Надеюсь, это может дать больше информации: я показываю разные текстуры изображений, используя three.js сцена, когда курсор мыши перемещается по различным элементам или надписям. Как только мышь вводит элемент, переменная времени (установленная в 0) обновляется 60 раз в секунду с использованием requestAnimationFrame. Эта переменная помогает мне создавать разные шейдерные анимации для текстур. Я хочу перезапустить значение времени до 0 только тогда, когда мышь переходит на другой элемент, если мышь перемещается по тому же элементу, время должно продолжать обновляться. То же самое со всеми элементами.

3. почему бы просто не сбросить его, когда он покидает текущий элемент?

4. Я бы использовал mouseenter and mouseleave , поскольку они не пузырятся и поэтому более интуитивно понятны в использовании.

Ответ №1:

Вы можете сохранить последний наведенный dom и проверить, совпадает ли он:

 function changeShader() {
  let last_hover;
  const elements = document.querySelectorAll('.caption');

  elements.forEach(element => {
    element.addEventListener('mouseover', function() {
      if (last_hover == this) {
        console.log('you moused over the same element');
      } else {
        console.log('you moused over on a different element');
      }
      last_hover = this;
    });
  });
}

changeShader()

 .caption, .no-hover{
  padding:10px;
  margin-bottom: 25px;
  background-color: #ccc;
  cursor: pointer;
}

 <div class="caption">I am Caption 1</div>
<div class="caption">I am Caption 2</div>
<div class="caption">I am Caption 3</div>
<div class="caption">I am Caption 4</div>
<div class="caption">I am Caption 5</div>

Ответ №2:

Это один из способов сделать это динамически с помощью JavaScript. В этом примере код присваивает обработчик событию onmouseover каждого элемента, в данном случае каждый элемент является кнопкой.

 var flags = new Array(2);
flags[0] = 0;
flags[1] = 0;
    var buttons = document.getElementsByTagName("button");

    for (let i = 0, max = buttons.length; i < max; i  ) {
          let temp = i;
          buttons[temp].onmouseover= function(){
               console.log("Moused over this button "   buttons[temp].id   " "   flags[temp]     "x  before." );
    if ((flags[temp] == 2)) {
        this.onmouseover = null;
        alert("Done documenting bbutton "   buttons[temp].id);
     }
};  
}// end for

 <style>
#a {
background: #000;
color: lime;
}
#b {
background: #000;
color: cyan;
}
#a:hover,#b:hover {
background: #600;
color: #ffdede;
}
</style>
<div><button id="a">Button A</button>
<button id="b">Button B</button></div>

Устанавливая для каждой кнопки уникальный атрибут id, он использует это значение, чтобы отличить, на какую кнопку наведен указатель мыши.

Примечание: CSS является строго необязательным — просто хотел улучшить визуальные эффекты.