时间戳

首页 > 解决方案 > Vue mouseevents 在元素之外丢失了引用

javascript - Vue mouseevents 在元素之外丢失了引用

问题描述

我正在尝试使用 Vue 实现一个多滑块范围组件。我发现的最合适的例子如下：https ://codesandbox.io/s/vue-price-range-slider-forked-czw1d

我正在尝试重构它的代码，但我遇到了一个问题……在第 153 行，PriceRangeSlider.vue我们有代码循环["mouseup", "mousemove"]以将这些事件添加到 document.body。

我已经使用 @mouseup 和 @mousemove 本机 vue 方法将这些事件直接移动到 track1 和 track2 元素。问题是现在只有当鼠标正好在这些元素内时才会发生拖动。我希望即使我移到它的元素之外，没有 mouseup，仍然会拖动。

我所做的是在这个链接上：https ://codesandbox.io/embed/vue-price-range-slider-forked-ubzxf

这是相同的代码，但我已经进行了上述更改。

谁能帮我理解为什么会发生这种情况？

标签： javascriptvue.js

解决方案

您需要在 body 上而不是在此元素上跟踪 mousemove 事件。所以这段代码

   "mousemove",
      "touchstart",
      "touchmove",
      "touchend",
    ].forEach((type) => {
      document.querySelector(".track1").addEventListener(type, (ev) => {
        ev.stopPropagation();
        self[type](ev, "track1");
      });

对您的情况无效。你需要的是

  1. onclick = () => document.body.addEventListener('mousemove', yourHandler)

  2. document.body.addEventListener([mouseup, mouseleave], () => document.body.removeEventListener('mousemove', yourHandler)

  3. 您的处理程序应将基于偏移量的值移动到上一个事件。

推荐阅读