Python Flask中onclick监听器不生效，如何实现带确认弹窗的删除功能

问题根因 #

1. 默认事件冒泡冲突：你的按钮内部嵌套了<a href="">标签，空href的默认行为是跳转当前页面刷新，点击按钮时首先触发a标签的默认跳转行为，直接把后续JS逻辑的跳转操作覆盖了，看起来就像JS逻辑没生效。
2. 语法使用错误：document.location.href是字符串属性，不是可调用方法，你写的document.location.href("xxx")是完全错误的写法，会直接抛出JS异常，后续逻辑自然不会执行，这也是所有location相关代码全部失效的核心原因。
3. window.open('_self')失效同理：同样是a标签的默认刷新行为先执行，覆盖了JS设置的跳转逻辑，并非window.open本身的问题。

解决方案 #

方案1：移除多余a标签，修正location写法（最推荐） #

按钮本身不需要嵌套a元素，直接删掉空a标签、修正JS语法即可正常运行：

<button id="{{project['_id']|string}}" class="btn btn-info">
    <i class="fas fa-trash-alt"></i> Delete Project
</button>

<script>
document.getElementById("{{project['_id']|string}}").addEventListener('click', function() {
    if (window.confirm("Do you really want to delete this project?")) {
        // href是属性，直接赋值即可，不需要调用
        window.location.href = "{{ url_for('delete_project', project_id=project['_id']|string) }}";
    }
});
</script>

方案2：保留a标签的话阻止默认行为 #

如果一定要保留现有a标签结构，在事件回调里阻止默认事件和冒泡即可：

document.getElementById("{{project['_id']|string}}").addEventListener('click', function(e) {
    // 阻止默认行为，避免a标签的空href触发刷新
    e.preventDefault();
    e.stopPropagation();
    if (window.confirm("Do you really want to delete this project?")) {
        window.location.href = "{{ url_for('delete_project', project_id=project['_id']|string) }}";
    }
});

方案3：必须用window.open的场景 #

确认阻止默认事件后，window.open(url, '_self')就可以正常在当前标签打开，不会新开页面：

document.getElementById("{{project['_id']|string}}").addEventListener('click', function(e) {
    e.preventDefault();
    if (window.confirm("Do you really want to delete this project?")) {
        window.open("{{ url_for('delete_project', project_id=project['_id']|string) }}", "_self");
    }
});

额外优化建议 #

删除操作属于写操作，尽量不要用GET请求，避免用户误访问链接、爬虫爬取触发意外删除，建议Flask路由只保留POST方法，前端改为用表单提交或者fetch发送POST请求，更符合Web安全规范。

内容的提问来源于stack exchange，提问作者Hai-Shuo Shu