IE 中未调用复选框 onclick 函数

Question

我在 HTML 中有以下复选框：

function updateSettings(id, bit) {
  alert('0');
}

<input type="checkbox" onclick="alert('1');updateSettings(0, 1);alert('2');" />

在 IE11 中点击我得到警告 1、2 但不是 0：函数根本没有执行。

在 Chrome 中一切正常。

Answer 1

找到了问题，但很奇怪。如果将函数名称更改为小写，则可以正常工作。

function updatesettings(id, bit) {
  alert('0');
}

<input type="checkbox" onclick="alert('1');updatesettings(0, 1);alert('2');" />

演示：http://codepen.io/anon/pen/YXLgxJ

UPDATE：正如 Zimmi 所解释的那样，updateSettings 是 IE 中的内置方法 document.updateSettings()，它将在 onclick 事件而不是我们的方法 window.updateSettings()

Answer 2

我建议不要使用内联 onclick 事件，而是使用 jquery 为复选框定义事件：

    function updateSettings(id, bit) {
        alert('0');
    }

    jQuery(document).ready(function(){
         jQuery("#cbMyCheckbox").click(function(){
              alert('1');
              updateSettings(0, 1);
              alert('2');
         });
    });

然后在你的 html:

    <input type="checkbox" id="cbMyCheckbox" />

Answer 3

函数 updateSettings 在 IE 中定义在 document 对象上。看到这个 documentaion.

当您进行内联调用时，如本例中的 onclick，如果定义了函数，它将首先在元素本身中查找。然后它将搜索 DOM 树直到 document 以查看函数是否被定义（一些元素被搜索而一些没有，不幸的是直到@user4749485 写下他的评论我才知道管理这个的规则下面），之后，作为最后的手段 window。当它找到它时，它会运行它。

因为您可能在全局对象 (window) 上定义了自己的 updateSettings，它不会在 IE 中触发，因为首先找到在 document 对象上定义的函数。

神秘错误结束:-)

更新：

@user4749485 指向 link 在 w3 site 中对此进行了解释，信息在项目 1.10 - Lexical Environment Scope 中。总结一下：

<element onclick="functionFoo();">bar</element>

意味着以下过程：

Does element.functionFoo exist ?  YES ==> use this function.
ELSE
Does element belong(1) to a form and form.functionFoo exist ? YES ==> use this function.
ELSE
Does document.functionFoo exist ?  YES ==> use this function.
ELSE
Does window.functionFoo exist ?  YES ==> use this function.
ELSE
crash.

(1) = 元素属于表单 != 元素在表单元素内。大致上它必须是一个表单元素，就像问题中的输入元素一样。

IE 中未调用复选框 onclick 函数

checkbox onclick function not called in IE

javascript

internet-explorer

onclick