我怎么知道是什么触发了变化？答案

【问题标题】：How do i know what triggered on change?我怎么知道是什么触发了变化？
【发布时间】：2019-05-16 09:02:04
【问题描述】：

有没有办法知道什么类型的移动触发了输入 type="number" 上的 onChange 事件

我解释一下：

我想知道更改是来自“文本”区域还是“向下和向上箭头”区域。有可能吗？

【问题讨论】：

不，您必须构建自己的输入界面（输入，加上上面的 2 个箭头，作为具有单独 ID 的单个组件等）。
这是我的想法，但不知何故，我希望事件对象中有一个未知属性可以给我这个东西:(

标签： javascript html events onchange

【解决方案1】：

onchange 事件只会在来自 UI 和上下键输入的每个输入处触发。
否则，我们必须失去焦点，或者按回车触发这个事件。

所以我们可以检查我们是否仍然是 activeElement 并因此从 UI 中触发，或者不是来自于打字。
除了 Enter 键...

let enter_down = false;
inp.addEventListener('change', e => {
  if(enter_down || inp !== document.activeElement) {
    console.log('typing');
  }
  else {
    console.log('arrows');
  }
});

inp.addEventListener('keydown', e => {
  if(e.key === 'Enter') {
    enter_down = true;
  }
});
inp.addEventListener('keyup', e => {
  if(e.key === 'Enter') {
    enter_down = false;
  }
});

&lt;input type="number" id="inp"&gt;

【讨论】：

谢谢，当我启动 sn-p 时，如果我使用数组“打字”是日志而不是箭头。 Kévin Bibollet 编写我想要的解决方案
@MaximeGirou 韩！火狐……对吧？他们总是在聚焦输入时表现出奇怪的行为......
是的，火狐：D
Firefox 不会对这段代码做任何奇怪的事情......使用箭头时的箭头，使用键盘时的输入，使用滚轮时的箭头 - 就像其他答案一样
@JaromandaX 不，在 FF 中 OP 描述的情况下它实际上失败了：当最初模糊时，单击箭头不会将焦点设置在输入上。我的代码在这里失败，但我认为焦点没有设置在输入上是出乎意料的。或者您是说它确实将重点放在您的操作系统上？那可能是，我正在 macOS 上体验它，而且我至少知道 one bug that only affects macOs related to this.

【解决方案2】：

回调中的Event 对象不会为您提供此信息。但是你可以试试这个技巧：

const onChange = function(e) {
  if ($(this).data('_oldval') !== this.value) {
    console.log('from arrows')
  }

  $(this).removeData('_oldval');
};

const onKeyUp = function(e) {
  if (e.which >= 37 && e.which <= 40) {
    return onChange(e);
  }

  $(this).data('_oldval', this.value);
  
  console.log('from text field');
};

$('input').on('change', onChange);
$('input').on('keyup', onKeyUp);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number">

没有 jQuery 也一样：

const onChange = function(e) {
  if (this.dataset) {
    if (this.dataset._oldval !== this.value) {
      console.log('from arrows')
    }
    
    delete this.dataset._oldval;
  }
};

const onKeyUp = function(e) {
  if (e.which >= 37 && e.which <= 40) {
    return onChange(e);
  }

  this.dataset._oldval = this.value;
  
  console.log('from text field');
};

document.querySelector('input').addEventListener('change', onChange);
document.querySelector('input').addEventListener('keyup', onKeyUp);

&lt;input type="number"&gt;

【讨论】：

滚轮触发“从箭头”输出：p
不错，但是你到底是怎么用轮子改变输入值的？对我没有任何帮助...
我没有看到滚轮有任何变化。这个解决方案很完美！谢谢！
一定是firefox的东西
@KévinBibollet ...单击输入框...使用滚轮...实际上是非常基本的东西...但这是firefox的东西，我猜chrome还没有赶上跨度>

【解决方案3】：

你可以用 vanillaJavascript 做这样的事情：

//Define a flag to save if the user used the keyboard on the input or the right arrows
let keyUpFlag = false;

//each time a change on the input is made by using the keyboard, the keyUpFlag is set to true
function onKeyUp(event) {
  keyUpFlag = true;
}


//bind this callback funtion to the on change event of the input
function onChange(event) {
  // if the this flag is set to true, means that the user changed the input by using the keyboard, so by changing the text.
  if (keyUpFlag) {
   console.log("On change from text!");
  } else {
    //If not, means that used the the right arrows to change the value
   console.log("On change from the arrows!");
  }
  //sets again the flat to false in order to reset the on key value state
  keyUpFlag = false;
}

&lt;input type="number" onchange="onChange(event)" onkeyup="onKeyUp(event)"&gt;

【讨论】：

滚轮触发“从箭头”输出：p
我没有收到任何带有“On change from text!”的日志.否则 Kévin Bibollet 会写出我想要的解决方案。谢谢你！