【问题标题】:Why is onchange on a checkbox not fired when the checkbox is changed indirectly当复选框被间接更改时,为什么不会触发复选框上的 onchange
【发布时间】:2010-01-29 10:16:45
【问题描述】:

我正在使用 Prototype 来监视复选框,因此我可以向它们添加 javascript 检查。当checkbox所在的tr或td被点击时,checkbox应该被勾选。
当您直接单击复选框时,会触发 onchange 事件,因此您会收到警报。当复选框的值被 javascript 更改时(当您单击 tr 或 td 时),不会触发 onchange。为什么间接更改复选框时不触发onchange?

这是我正在使用的 javascript。

Element.observe(window, 'load', function() {
        /* If a tr or td is clicked, change the value of the checkbox. */
        $$('#results tr').each(function(el) { 
            el.observe('click', function(e) {
                if(!e.target) { e.target = e.srcElement; }
                if(e.target.nodeName == 'TD' || e.target.nodeName == 'TR') {
                    $('compare-product'+this.id).checked = ($('compare-product'+this.id).checked === false) ? true : false;
                }
            });
        });
        /* Monitor if the status of a checkbox has changed. */
        $$('#results tr td input').each(function(el) {
                el.observe('change', function(e) {
                        alert('!');
                    }
                );
            }
        );
    }
);

我已经在 Firefox 和 IE7 中测试过,都无法正常工作。我不是在寻找解决方法,我只是想知道为什么这不起作用。

【问题讨论】:

  • 如果是,如果在事件处理代码中更改复选框的状态会发生什么?
  • 我不明白你的意思。
  • 如果您更改偶数处理程序中的状态,则将再次调用相同的事件处理程序。如果是这样,你可能有一个无限循环。
  • Mattias:如您所见,我正在更改 onclick 处理程序中复选框的状态,该处理程序设置在 tr 上。我看不出如何通过更改复选框的状态再次调用它。

标签: javascript prototype checkbox onchange


【解决方案1】:

这在一般的 UI 框架中并不少见。如果您以编程方式更改控件的状态,则假定您还能够以编程方式触发它应该具有的任何副作用。它为程序员提供了更大的灵活性,并且避免了在初始化或拆卸期间状态不断变化的错误。 (例如,在初始化期间,您可能会先设置一个控件的状态,然后再设置几个从属控件的状态。如果第一个控件的更改处理程序立即触发,它将在其他控件处于不一致状态时执行。)

【讨论】:

    【解决方案2】:

    您不能这样做的真正原因是因为它是编程模型中的安全问题。非用户发起的事件通常不会被链接。因此,尽管设置一个值很好,但继续触发在该控件上设置的任何事件并不好。

    jamesdlin 所说的毫无意义。

    詹姆斯德林:

    “例如,在初始化期间, 你可以设置一个控件的状态 在设置几个状态之前 依赖的。如果更改处理程序 第一次控制火灾 立即,它将执行而 其他控件不一致 状态。”

    无论您是否以编程方式更改值或单击控件,这都是正确的。在任何一种情况下,您都可能依赖于其他控件。

    【讨论】:

    • 我的意思是,在初始化期间,一些控件可能还没有完全初始化(因此可能有意外的值)。
    猜你喜欢
    • 2014-09-24
    • 1970-01-01
    • 2018-04-10
    • 2018-10-29
    • 1970-01-01
    • 1970-01-01
    • 2019-08-26
    • 2011-06-19
    • 2019-04-13
    相关资源
    最近更新 更多