Question

任务是创建智能提示，如果我将光标快速移至时钟上方并显示速度是否变慢，该提示将不会显示。所以问题出在最后一个“ if”中，因为我不知道如何强制出现提示（来自工具提示）顺便说一句，我希望速度能正确评估

问题出在这个区块

  if (+velocity < +this.sensitivity){//если скорость меньше требуемой показывай подсказку
    this.over();
    //tooltip.hidden = false;
  }else{
    this.out(); 
    //tooltip.hidden = true;

  }

完整代码在这里

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Документ</title>
</head>

<body>

  <div id="elem" class="clock">
    <span class="hours">12</span> :
    <span class="minutes">30</span> :
    <span class="seconds">00</span>
  </div>

  <div id="tooltip" hidden>Подсказка</div>


<style>
.hours {
  color: red;
}

.minutes {
  color: green;
}

.seconds {
  color: blue;
}

.clock {
  border: 1px dashed black;
  padding: 5px;
  display: inline-block;
  background: yellow;
  position: absolute;
  left: 0;
  top: 0;
}

.tooltip {
  position: absolute;
  background: #eee;
  border: 1px brown solid;
  padding: 3px;
}
</style>

  <script>

'use strict';

// Здесь показан набросок класса
// с возможностями, которые нам понадобятся
class HoverIntent {

  constructor({
    sensitivity = 0.1, // скорость ниже 0.1px/ms значит "курсор на элементе"
    interval = 100, // измеряем скорость каждые 100ms: определяем дистанцию между предыдущей и новой позицией.
    elem,
    over,
    out
  }) {
    this.sensitivity = sensitivity;
    this.interval = interval;
    this.elem = elem;
    this.over = over;
    this.out = out;

    // убедитесь, что "this" сохраняет своё значение для обработчиков.
    this.onMouseMove = this.onMouseMove.bind(this);
    this.onMouseOver = this.onMouseOver.bind(this);
    this.onMouseOut = this.onMouseOut.bind(this);

    // назначаем обработчики
   // elem.addEventListener("mouseover", this.onMouseOver);
   // elem.addEventListener("mouseout", this.onMouseOut);
    elem.addEventListener('mouseenter', this.onMouseOver);
    elem.addEventListener('mouseleave', this.onMouseOut);

  }

  onMouseOver(event) {
    // включаем при захождении курсора на часы периодическую функцию 
 this.iswork = true;
 this.onMouseMove(event);
  }
  onMouseOut(event) {
  this.iswork = false;
  }
  onMouseMove(event) {     
    if(event.relatedTarget == null || event.relatedTarget.tagName == 'HTML'){//первый заход на часы задаем параметры координат
      var xPrevious = event.clientX;
      var yPrevious = event.clientY;
      var xNow = xPrevious;
      var yNow = yPrevious;
    }
      //блок подсчета скорости

      let interval = setInterval(() =>{//каждые this.interval секунд снимаем координаты и вычисляем скорость
      if (this.iswork == false) clearInterval(interval);//остановка вычислений при вызове "onMouseOut"
      elem.addEventListener('mousemove', (ev) =>{
      xNow = ev.clientX;//координата Х в данный момент времени
      yNow = ev.clientY;//координата У в данный момент времени
      })
      let distantion = Math.sqrt(Math.pow(xNow-xPrevious,2) + Math.pow(yNow-yPrevious,2));//расстояние пройденное мышью
      let velocity = distantion/this.interval;//вычисление скорости
      
      // !! не работает
      if (+velocity < +this.sensitivity){//если скорость меньше требуемой показывай подсказку
        this.over();
        //tooltip.hidden = false;
      }else{
        this.out(); 
        //tooltip.hidden = true;

      }
      xPrevious = xNow;
      yPrevious = yNow;
  }, this.interval);
  }  
  // destroy() {
  //   /* ваш код для отключения функционала и снятия всех обработчиков */
  //   }

}
    // для демо
  setTimeout(function() {
      new HoverIntent({
        elem,
        over() {
          tooltip.hidden = false;
        },
        out() {
          tooltip.hidden = true;
        }
      });
    }, 2000);

  </script>

</body>
</html>

不了解如何在工具提示中显示提示

0 个答案: