note

Appearance

Mouse Move ​

https://zh.javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave

https://www.yuque.com/qinsjs/jsinfo/lr7gyd

mouseover/mouseout ​

清空

mouseover：

  • event.target —— 鼠标当前元素。
  • event.relatedTarget —— 来自的那个元素。

mouseout 则与之相反：

  • event.target —— 从那个元素离开。
  • event.relatedTarget —— 鼠标的目标元素 / 当前元素。

提示

relatedTarget 是对事件 mouseover/mouseout 的补充。

relatedTarget 可以为 null。

事件是直接监听到 class="container" 上的

code
html
<div
  class="container"
  @mouseover="handler"
  @mouseout="handler"
  @mousemove="handler"
>
  <div class="smiley-green">
    <div class="left-eye"></div>
    <div class="right-eye"></div>
    <div class="smile"></div>
  </div>

  <div class="smiley-yellow">
    <div class="left-eye"></div>
    <div class="right-eye"></div>
    <div class="smile"></div>
  </div>

  <div class="smiley-red">
    <div class="left-eye"></div>
    <div class="right-eye"></div>
    <div class="smile"></div>
  </div>
</div>

mouseenter/mouseleave ​

与 mouseover/mouseout 的区别

  1. 鼠标移动到 子元素 不会触发新事件（眼睛嘴巴不会变色）。
  2. 不会冒泡！！！
清空

事件监听在每个 smiley 上

code
html
<div class="container">
  <div
    class="smiley-green"
    @mouseenter="handler"
    @mouseleave="handler"
    @mousemove="handler"
  >
    <div class="left-eye"></div>
    <div class="right-eye"></div>
    <div class="smile"></div>
  </div>

  <div
    class="smiley-yellow"
    @mouseenter="handler"
    @mouseleave="handler"
    @mousemove="handler"
  >
    <div class="left-eye"></div>
    <div class="right-eye"></div>
    <div class="smile"></div>
  </div>

  <div
    class="smiley-red"
    @mouseenter="handler"
    @mouseleave="handler"
    @mousemove="handler"
  >
    <div class="left-eye"></div>
    <div class="right-eye"></div>
    <div class="smile"></div>
  </div>
</div>

其他 ​

demo 是临摹 js.info 的

它的事件记录 特别有意思（move 的那个 x）。

它是记录了 last event 和 repeatCounter 。如果是 repeatCounter ，直接去除最末尾的 x 然后更细 x + repeatCounter。