释放鼠标时出现流星`change`值，而不是拖动输入滑块？答案

【问题标题】：Meteor `change` value appears when mouse released, not as input slider is dragged?释放鼠标时出现流星`change`值，而不是拖动输入滑块？
【发布时间】：2016-02-15 21:10:32
【问题描述】：

我刚刚将一个粗略的原型从纯 Javascript 移植到 Meteor。

在纯 Javascript 中，我使用以下代码来更新某些元素，因为它们使用来自各种滑块 (input type="range") 的值进行拖动：

myElement.addEventListener("input", function() {
  update stuff here…

当我拖动滑块时，值会更新。

在 Meteor 中，我使用下面的代码来触发所有滑块的更新功能：

'change input[type=range]': function(event) {
  update stuff here…

但这些值仅在我释放鼠标按钮时出现。 Meteor 的change 的最佳/最简单/最小替代方案是什么？在拖动滑块时显示值？

【问题讨论】：

标签： javascript meteor

【解决方案1】：

我认为您可以将 Meteor 的 onRendered 函数与滑块模板一起使用，并使用您原来的 JS。

像这样的

if(Meteor.isClient){
    Template.TEMPLATENAMEHERE.onRendered(function(){ 
      myElement.addEventListener("input", function() {
      update stuff here…
    });
 })    
}

这是一个相关链接：

onChange event for HTML5 range

您也可以只使用 mouseup 事件而不是更改事件

【讨论】：

同意，虽然.onRendered 失败，但在.rendered 中添加我的事件侦听器可以使用滑块值在更改时更新 DOM：Template.TEMPLATE_NAME.rendered = function() { …eventListener stuff… -只是我希望 Meteor 能解决这个问题。顺便说一句 mouseUp 会导致同样的问题 - mouseUp 之前不会更新。

【解决方案2】：

假设您使用的是 jQuery 滑块，您应该在调用 .slider() 时使用 slide 选项。 Meteor 本身无法做到这一点。

【讨论】：

谢谢，虽然我没有使用 JQuery 滑块，只是（现在）将我的工作原生 js 添加到 Meteor 应用程序，触发器为 Meteor 的 'change input[type=range]'，它只在 mouseup 之后更新 DOM滑块已释放，而不是使用本机 js addEventListener，它允许我在拖动滑块时更新 DOM。