移动：mouseover/out，mouseenter/leave

<div class="blue" onmouseover="mouselog(event)" onmouseout="mouselog(event)">
  <div class="red"></div>
</div>
<script>
  function mouselog(event) {
    console.log(event.type + '[target:' + event.target.className + ' ]')
  }
</script>

没有触发额外事件，后代元素被忽略了。

<div class="blue" onmouseenter="mouselog(event)" onmouseleave="mouselog(event)">
  <div class="red"></div>
</div>
<script>
  function mouselog(event) {
    console.log(event.type + '[target:' + event.target.className + ' ]')
  }
</script>

事件委托

mouseenter/mouseleave 事件使用起来非常简易。但由于事件本身不冒泡，所以不能使用事件委托。

想象一下，我们想要处理表格单元格的鼠标移入/离开事件，而且有数百个单元格。

首先想到的解决方案是在 <table> 上绑定事件处理程序，但 mouseenter 和 mouseleave 事件是不冒泡的。因此，如果想要这个事件发生在 <td> 上，那么只有 <td> 上的处理程序才能捕获它。

<table> 上的 mouseenter/leave 事件处理器只会在移入/离开表格时调用，无法捕获其内部任何过渡信息。

如果用 mouseover/mouseout 的话就没有这个问题了。

一个简单的处理程序可能如下所示：

// 在鼠标移入时，高亮单元格
table.onmouseover = function (event) {
  let target = event.target;
  target.style.background = 'pink';
};
table.onmouseout = function (event) {
  let target = event.target;
  target.style.background = '';
};

从任何元素到表格内的任何元素时，这些处理程序都会调用。

但上面的例子是有问题的，就是 <td> 里面的 <strong> 元素也会被捕捉，这不是我们想要的效果。我们想要处理的是 <td>，不包括它的子元素。

解决方案之一是：

• 记住当前高亮的 <td> 元素在变量中。

• mouseover 时，如果仍在当前 <td> 中，就忽略。

• mouseout 时，如果还未离开当前 <td>，就忽略。

这里我们想要过滤的“额外”情况，是鼠标在 <td> 元素的后代元素中间来回移动的情况。

下面是代码实现：

let currentElem = null;
table.onmousemove = function (event) {
  if (currentElem) {
    // 在进入新元素前，总要保证鼠标已经离开之前的高亮元素
    // 如果还没离开当前的 <td> 元素，就表示我们还在它里面，所以不做任何事
    return ;
  }
  let target = event.target.closest('td');
  if (!target || !table.contains(target)) {
    // !target 的情况。例如，从 外界 -> table/th
    // !target.contains(target) 的情况。例如，在 <td> 里面的 <td>
    return ;
  }
  // OK 现在在新的 <td> 元素上了
  currentElem = target;
  target.style.background = 'pink';
};
table.onmouseout = function (event) {
  if (!currentElem) {
    // 当前没有高亮的 <td> 元素，那么不做任何事。
    return ;
  }
  // 我们正在离开元素，去哪里的呢？可能是一个子元素？
  let relatedTarget = event.relatedTarget;
  if (relatedTarget) { // relatedTarget 可能等于 null。例如离开 table
    while (relatedTarget) {
      // 去父级链检查，如果仍然是在当前的 currentElem 中移动的
      // 表示是中间的过渡状态，忽略（不做去除高亮的处理）
      if (relatedTarget === currentElem) {
        return ;
      }
      relatedTarget = relatedTarget.parentNode;
    }
  }
  // 现在，是真的离开元素，去除高亮 
  currentElem.style.background = '';
  currentElem = null;
};

现在将鼠标在表格单元中随意移动，就能看到我们最终想要的效果了。

总结

本章我们介绍了 mouseover、mouseout、mousemove、mouseenter 和 mouseleave 事件。

有些需要我们注意的地方：

• 快速移动鼠标会触发 mouseover、mosemove 和 mouseout 事件，而且会忽略中间元素。

• mouseover/out 和 mouseenter/leave 事件有一个额外的属性：relatedTarget，指代来源元素/去往元素，与 target 属性相对。

• mouseover/out 事件冒泡，当我们只给父级绑定它的时候，在子元素中间切换也会导致 mouseout 和 mouseover 事件的连续触发。因为鼠标同一时间只能在一个元素上（最内层的或层级最高的元素）。

• mouseover/out 事件不冒泡，它们只会在绑定事件的元素上触发。

练习题

问题

一、改进版提示框

实现一个 JavaScript 版本的提示框，使用元素的 data-tooltip 特性作为提示框内容显示。

有点类似之前的实现的“提示框”任务，但是这里实现的注释元素时可以嵌套的，可以显示最里层的嵌套提示框。

例如，如下的结构：

<div data-tooltip="Here – is the house interior" id="house">
  <div data-tooltip="Here – is the roof" id="roof"></div>
  ...
  <a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Read on…">Hover over me</a>
</div>

最终的实现效果如这里展示的：demo。

PS. 注意，一次只能显示一个提示框。

二、“智能”提示框

编写一个函数，仅当访问者将鼠标移到元素上而不是通过它时才显示元素上的提示框。

也就是说，如果访问者将鼠标移动到元素上并且停下时——才展示提示框。如果是移动鼠标很快的话，就没必要显示了，谁像看到闪动效果呢？

从技术上讲，我们可以测量鼠标经过元素上速度。如果是缓慢地，那么我们认为它“在元素上”时就显示提示框；如果很快，就忽略提示框的显示。

创建一个通用对象 new HoverIntent(options)。options 包含下列选项：

• elem：被跟踪元素。

• over：在鼠标缓慢经过元素时调用的函数。

• out：在鼠标离开元素时调用的函数（如果调用了 over）。

使用这个对象创建提示框的例子如下：

// 简单的提示框
let tooltip = document.createElement('div');
tooltip.className = 'tooltip';
tooltip.innerHTML = 'Tooltip';
// 对象会跟踪鼠标运动，调用 over/out
new HoverIntent({
  elem,
  over() {
    tooltip.style.left = elem.getBoundingClientRect().left + 'px';
    tooltip.style.top = elem.getBoundingClientRect().bottom + 5 + 'px';
    document.body.append(tooltip);
  },
  out() {
    tooltip.remove();
  }
});

答案

一、改进版提示框

let tooltip;
document.onmouseover = function(event) {
  // important: a fast-moving mouse may "jump" right to a child on an annotated node, skipping the parent
  // so mouseover may happen on a child.
  let anchorElem = event.target.closest('[data-tooltip]');
  if (!anchorElem) return;
  // show tooltip and remember it
  tooltip = showTooltip(anchorElem, anchorElem.dataset.tooltip);
}
document.onmouseout = function() {
  // it is possible that mouseout triggered, but we're still inside the element (cause of bubbling)
  // but in this case we'll have an immediate mouseover,
  // so the tooltip will be destroyed and shown again
  //
  // that's an overhead, but here it's not visible
  // can be fixed with additional checks
  if (tooltip) {
    tooltip.remove();
    tooltip = null;
  }
}
function showTooltip(anchorElem, html) {
  let tooltipElem = document.createElement('div');
  tooltipElem.className = 'tooltip';
  tooltipElem.innerHTML = html;
  document.body.append(tooltipElem);
  let coords = anchorElem.getBoundingClientRect();
  // position the tooltip over the center of the element
  let left = coords.left + (anchorElem.offsetWidth - tooltipElem.offsetWidth) / 2;
  if (left < 0) left = 0;
  let top = coords.top - tooltipElem.offsetHeight - 5;
  if (top < 0) {
    top = coords.top + anchorElem.offsetHeight + 5;
  }
  tooltipElem.style.left = left + 'px';
  tooltipElem.style.top = top + 'px';
  return tooltipElem;
}

在线例子。

二、“智能”提示框

'use strict';
class HoverIntent {
  constructor({
    sensitivity = 0.1, // speed less than 0.1px/ms means "hovering over an element"
    interval = 100,    // measure mouse speed once per 100ms
    elem,
    over,
    out
  }) {
    this.sensitivity = sensitivity;
    this.interval = interval;
    this.elem = elem;
    this.over = over;
    this.out = out;
    // make sure "this" is the object in event handlers.
    this.onMouseMove = this.onMouseMove.bind(this);
    this.onMouseOver = this.onMouseOver.bind(this);
    this.onMouseOut = this.onMouseOut.bind(this);
    // and in time-measuring function (called from setInterval)
    this.trackSpeed = this.trackSpeed.bind(this);
    elem.addEventListener("mouseover", this.onMouseOver);
    elem.addEventListener("mouseout", this.onMouseOut);
  }
  onMouseOver(event) {
    if (this.isOverElement) {
      // if we're over the element, then ignore the event
      // we are already measuring the speed
      return;
    }
    this.isOverElement = true;
    // after every mousemove we'll be check the distance
    // between the previous and the current mouse coordinates
    // if it's less than sensivity, then the speed is slow
    this.prevX = event.pageX;
    this.prevY = event.pageY;
    this.prevTime = Date.now();
    elem.addEventListener('mousemove', this.onMouseMove);
    this.checkSpeedInterval = setInterval(this.trackSpeed, this.interval);
  }
  onMouseOut(event) {
    // if left the element
    if (!event.relatedTarget || !elem.contains(event.relatedTarget)) {
      this.isOverElement = false;
      this.elem.removeEventListener('mousemove', this.onMouseMove);
      clearInterval(this.checkSpeedInterval);
      if (this.isHover) {
        // if there was a stop over the element
        this.out.call(this.elem, event);
        this.isHover = false;
      }
    }
  }
  onMouseMove(event) {
    this.lastX = event.pageX;
    this.lastY = event.pageY;
    this.lastTime = Date.now();
  }
  trackSpeed() {
    let speed;
    if (!this.lastTime || this.lastTime == this.prevTime) {
      // cursor didn't move
      speed = 0;
    } else {
      speed = Math.sqrt(
        Math.pow(this.prevX - this.lastX, 2) +
        Math.pow(this.prevY - this.lastY, 2)
      ) / (this.lastTime - this.prevTime);
    }
    if (speed < this.sensitivity) {
      clearInterval(this.checkSpeedInterval);
      this.isHover = true;
      this.over.call(this.elem, event);
    } else {
      // speed fast, remember new coordinates as the previous ones
      this.prevX = this.lastX;
      this.prevY = this.lastY;
      this.prevTime = this.lastTime;
    }
  }
  destroy() {
    elem.removeEventListener('mousemove', this.onMouseMove);
    elem.removeEventListener('mouseover', this.onMouseOver);
    elem.removeEventListener('mouseout', this.onMouseOut);
  };
}

在线例子。

（完）