Electron桌面应用点击按钮触发全局刷新的阻止方法求助

嘿，我帮你搞定这个点击按钮就刷新整个应用的麻烦事儿！

问题根源 #

在网页环境里（包括Electron的渲染进程页面），如果你的按钮是放在<form>标签里，或者按钮的type默认是submit的话，点击按钮会触发浏览器的默认表单提交行为，这就会导致页面刷新——哪怕是Electron应用也逃不过这个浏览器原生逻辑。从你的代码来看，你没有阻止这个默认行为，所以才会每次点击都刷新。

解决方案 #

我们只需要两步就能解决：

1. 在点击函数里阻止默认事件

修改你的ren函数，在开头添加e.preventDefault()，直接阻止浏览器的默认刷新行为。另外注意调用函数时要把event参数传进去。

2. 确保按钮类型正确（可选但推荐）

如果你的按钮在<form>里，给按钮加上type="button"，明确告诉浏览器这不是一个提交按钮，避免触发表单提交。比如：

<button type="button" onclick="ren(event)">执行操作</button>

修改后的完整代码 #

<script>
window.$ = window.jQuery = require('jquery')
$(function(){
    var config = require('../jsonFiles/pathData.json');
    $("#aspnetCorePathRename").val(config.AspnetCorePath);
    $("#angularPathRename").val(config.AngularPath);
});

function ren(e) {
    // 关键：阻止浏览器默认行为，彻底避免页面刷新
    e.preventDefault();
    
    const fs = require("fs");
    fs.readFile('./scrips/Rename.ps1', function (err, data) {
        if (err) {
            $(".Console").html(err.toString());
            alert(err.toString());
            return console.error(err);
        }
        alert(data.toString());
    });
    // 注意：你这里调用的readFile()函数没有定义，记得检查是不是笔误哦！
}
</script>

额外优化建议（可选） #

尽量避免用内联的onclick绑定事件，推荐用jQuery的事件绑定方式，代码更清晰也更容易维护：

$(function(){
    // 给按钮绑定点击事件（替换成你的按钮ID）
    $("#yourButtonId").click(function(e) {
        e.preventDefault();
        
        const fs = require("fs");
        fs.readFile('./scrips/Rename.ps1', function (err, data) {
            if (err) {
                $(".Console").html(err.toString());
                alert(err.toString());
                return console.error(err);
            }
            alert(data.toString());
        });
    });
});

这样改完之后，点击按钮就不会再触发应用刷新啦！

内容的提问来源于stack exchange，提问作者Medhat Mahmoud