拇指/指针上的输入范围滑块移动完成火灾事件答案

【问题标题】：input range slider on thumb/pointer move complete fire event拇指/指针上的输入范围滑块移动完成火灾事件
【发布时间】：2019-04-08 09:55:43
【问题描述】：

我正在使用 HTML5 输入范围滑块，当用户移动指针/拇指时调用 API。

HTML

<input @change="myFunction($event)"  type="range" min="0" max="10" step="1" v-model="param7"  class="slider-color">

在拇指/指针移动完成后触发所有浏览器@change 事件。但是移动指针时在 IE11 中触发相同的事件。这就是为什么当指针移动时我的 API 在 IE11 中频繁调用的原因。

但我需要它与其他浏览器一样工作，以便 API 仅在指针移动完成时调用。有没有其他方法可以在 vuejs 或 jquery 中做到这一点？

我的方法

myFunction:function(e) {
  console.log('changed done');
}

每次触摸指针时都会在 IE 中输出 changed done。

【问题讨论】：

这就是 IE11 的行为方式，如果它也适用于 IE11，您可能最终会先检查 vue 包装器/插件范围滑块，因为您发布此内容后我进行了很多谷歌搜索并发现了大量问题，包括reactjs 和 vuejs github 问题页面。他们中的大多数人声称这是一个 ie11 问题。

【解决方案1】：

我已经通过添加 2 种方法来修复它，一种用于普通浏览器，另一种用于 IE，使用 @mouseup

<input @change="myFunction($event)" @mouseup="myFunctionIE($event)" type="range" min="0" max="10" step="1" v-model="param7"  class="slider-color">

现在功能

myFunction:function(e) {
  if(IE){
    return false;
  }
}

对于 IE

myFunctionIE:function(e) {
  if(!IE){
    return false;
  }
}

所以我放了相同的代码，但具有不同的名称功能&它按要求工作

【讨论】：