防止 onchange 事件进入无限循环答案

【问题标题】：Preventing onchange events from getting into an infinite loop防止 onchange 事件进入无限循环
【发布时间】：2012-01-12 10:47:54
【问题描述】：

我有两个文本字段，一个代表百分比，第二个代表相应的金额。现在我想要的是，当百分比改变时，金额应该改变，当金额改变时，百分比应该相应改变。我正在使用 JavaScript。

在这种情况下，如果其中任何一个发生变化，就会开始无限循环。

我想要的是，当金额发生变化时，它应该相应地改变百分比，然后循环应该停止。当百分比变化时，它应该相应地改变数量，然后循环应该停止。有什么办法吗？也许像stopPropagation 之类的？

虚拟 JS 代码：

这里value是一个文本框，percentage是另一个文本框

function valueChng(){
    percentage.value = "" + someInteger;
}
function percentageChng(){
    value.value = "" + someInteger;
}

谢谢！！

【问题讨论】：

您如何处理更改事件？通常，通过 JS 设置字段值不会触发“更改”事件，因此不应导致无限更改事件循环。
你能发布一些代码或小提琴吗？您的问题的解决方案取决于您如何更改内容以及您正在收听的事件。
@WTK 添加了一个虚拟代码。
@kanishk - 查看 Simon 的响应 - 正如您从他提供的小提琴中看到的那样 - 只需通过代码更改字段的值不会触发“更改”事件。您必须在代码的其他地方做错事（例如多次手动调用 valueChng / percentageChng 函数）。

标签： javascript events event-handling onchange

【解决方案1】：

我在这里仍然没有看到问题，因为以编程方式更改内容时不会执行更改处理程序。我刚刚实现了一个简单的小提琴来展示它是如何工作的，而不会陷入无限循环（为了简单起见，使用 jquery）： http://jsfiddle.net/aWuks/

【讨论】：

是的，你说得对，它们没有循环播放。所以现在我想问他们为什么不循环？我的意思是当另一个文本框的值发生变化时，它应该触发自己的onchange事件？
根据 W3C，“当控件失去输入焦点并且在获得焦点后其值已被修改时，会发生 onchange 事件”。当元素的值以编程方式更改时，元素不会失去焦点，事件不会被触发。
所以我们无法自动使第二个事件自己发生，我们所能做的就是在第一个事件结束时调用与第二个事件关联的函数。对吗？
至少在 jQuery 中，你当然也可以通过调用 $('#percentage').change() 或 $('#absolut').change() 来触发事件
这是真的@Simon，并且是防止事件循环无处不在的好规则。所以我有一个完全循环的库，因为当以编程方式完成某些事情时，它会像手动一样触发更改，进入循环。消除它，问题就解决了！ tks

【解决方案2】：

从我的头顶：

var changedFlag = false;

function valueChng(){
    if(changedFlag == true) {
      changedFlag = false;
      return;
    }

    percentage.value = "" + someInteger;
    changedFlag = true;
}
function percentageChng(){
    if(changedFlag == true) {
      changedFlag = false;
      return;
    }

    value.value = "" + someInteger;
    changedFlag = true;
}

这样，两个“onchange”事件中的第二个将始终被忽略。

【讨论】：

是的，这似乎是个好方法。我猜Return; 只是结束了该函数的执行，对吗？还有一件事，因为我有 5 对这样的对，我不需要为每对不同的标志对吗？
是的，return 按照您的描述工作，是的，您应该为不同的上下文使用不同的 flag 变量。
见西蒙斯的回答。我们不需要这个。 :)