javascript - 区分人类生成的事件和旧 IE 中生成的浏览器事件

Question

我有一个input[type=checkbox]当我改变它的checked时属性这不会生成 change现代浏览器中的事件。

IE9- 虽然会触发 propertychange当我这样做时发生的事件element.checked = true; .

如何区分 propertychange浏览器生成的事件，但代码更改 checkbox 的结果来自真人检查 checkbox ？

经过一番思考后，我唯一的想法是进行此检查:

if (
    document.activeElement != event.target 
    && event.type == 'propertychange' 
    && event.propertyName == 'checked'
) // its syntetic

但如果复选框有 focus ，这将会失败并通过代码更改，如果通过 <label> 更改复选框也会失败.

IE9-event有什么属性吗？我可以检查这个，或者有办法检测这个吗？

jsFiddle:http://jsfiddle.net/uuwe7ojc/

Answer 1

您只需监听 click 事件，每当用户更改属性时您都会收到通知，但不会在以编程方式更改属性时收到通知。我已经在 Chrome 和 IE 9、10、11 中对此进行了测试，它适用于单击复选框、单击包含的标签，甚至在聚焦时使用空格键来更改复选框。

工作演示:http://jsfiddle.net/jfriend00/tdhpaqs8/

document.getElementById("test").addEventListener("click", function(e) {
    // checkbox was changed by the user
});