Electron: 从 DOM 中删除的输入元素消耗 ^Z 直到其撤消堆栈为空

创建于 2015-12-03 · 3评论 · 资料来源: electron/electron

最小复制： https ://gist.github.com/DanielDignam/b49084941a2f731501d5

我们在 Windows 10 上使用节点 4.1.1、Chrome 45.0.2454.85 和 Electron 0.35.2

运行附加的应用程序。注意 ^Z 正确地向控制台报告。在输入框中输入一些内容并点击按钮从 DOM 中删除元素。点击 ^Z 注意它不报告。再次按 ^Z 并注意它。

如果您重新运行并将某些内容粘贴到文本框中 N 次，您会注意到在报告之前需要的 ^Z 数为 N+1。

这意味着输入框仍在处理事件，即使它不再位于 DOM 中，并且在清空其 Undo 堆栈之前不会传递 ^Z。

这会破坏我们应用程序中的撤消操作，如果输入字段已被使用然后从 DOM 中删除，应用程序撤消操作将不会在 ^Z 上恢复。

当没有表单/输入时，我们想撤消应用程序中的其他状态。

<!DOCTYPE html>
<html>
<head>
    <title>Hello World!</title>
</head>
<body id='body'>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
<script>
    function removeInput(event) {
        var i = document.getElementById("foo");
        var b = document.getElementById("body");
        b.removeChild(i);
    }
    const remote = require('electron').remote;
    const Menu = remote.Menu;
    const MenuItem = remote.MenuItem;
    var template = [
        {
            label: 'Edit',
            submenu: [
                {
                    label: 'Undo',
                    accelerator: 'CmdOrCtrl+Z',
                    click: function () {
                        console.log('Undo called');
                    },
                    enabled: true
                }
            ]
        }];
    menu = Menu.buildFromTemplate(template);
    Menu.setApplicationMenu(menu);
</script>
<input id='foo' type='text'/>
<input type='button' onclick='removeInput()'/>
</body>
</html>

资料来源