如何检测用户所做的更改和程序化更改之间的差异

How to detect the difference between a change made by a user and a change made programmatically?

本文关键字：之间 程序化 何检测 检测 用户      更新时间：2023-09-26

我有一个onChange事件处理程序，它被触发了两次；一次用于由用户进行的更改，第二次用于由原始用户的更改以编程方式进行的更改。对于前者，事件只应触发一次。你如何区分用户做出的更改和脚本做出的更改？

如果您只是用el.value = x更改值，则不会触发change事件。例如，这不会将任何内容记录到控制台：

var el = document.getElementById('el')
el.onchange = function(){
    console.log('changed');
};
el.value = 'asasassasa';

所以，如果你看到它被触发了两次，要么是因为：

  • 您正在使用el.onchange()手动触发它。在这种情况下，只需删除this调用

或者：

  • 事件处理程序多次绑定到元素。你必须找到发生这种情况的地方

捕捉此类问题并有时解决这些问题的一个好方法是始终在onchange处理程序中用当前值检查旧值。

function onChange_handler(e){
  if(this.old_value==this.value){
        return; // no change detected - check why was it called twice.
  }
  this.old_value=this.value;
  // the real change handling code
}
相关文章：