奇怪的重复事件处理程序

Question

（我简化了我之前问过的问题......）

在我的Excel Online加载项中，我想设置一个切换。当它打开时，它会激活一个事件处理程序，该事件处理程序监听工作簿的选择更改;当它关闭时，它会停用事件处理程序。

以下是JavaScript代码。我期望的是：当切换打开时，每次我点击工作簿的新单元格时，它都会添加一个 Done!;当切换关闭时，单击新单元格时不会打印任何内容。

(function() {
    "use strict";

    Office.initialize = function(reason) {
        $(document).ready(function() {
            app.initialize();            
            $('#toggle').click(handleClick);
        });
    };

    function handleClick() {
        if ($('#toggle').prop("checked")) 
        {
            Office.context.document.addHandlerAsync(Office.EventType.DocumentSelectionChanged, MyHandler);
        } else 
        {
            Office.context.document.removeHandlerAsync(Office.EventType.DocumentSelectionChanged, {
            handler: MyHandler
        });
        }
    }

    function MyHandler(eventArgs) {
        document.getElementById("demo").innerHTML += "Done!"
    }
})();

当我测试代码时，第一次打开切换时，它会在选择每个新单元格后添加一个 Done!。但是，当打开开关时=> off =＆gt;在选择每个新单元格后，它会添加两个 Done!。切换开启时=> off =＆gt; on =＆gt; off =＆gt;在选择每个新单元格后，它会添加三 Done! ...它真的很有线......

有谁知道发生了什么事？

PS：这是Home.html。

PS2：我还写了一个JSBin，结构类似document.addEventListener和document.removeEventListener。他们没有这个问题......