避免在它消失之前再次单击html按钮（django）

Question

我正在一个 Django 项目中工作，该项目具有用户可以加入的事件（将 user_id 和 event_id 添加到模型参加者中），在我的事件中，我有一个加入按钮表单，点击后添加参加者，点击后该按钮消失并出现一个名为离开事件的新按钮，反之亦然。当用户加入或离开活动页面时，所有这些都会重新加载。

我遇到的问题是，我可以在按钮消失之前连续单击按钮 2 次，因为它正在尝试添加已存在的出席对象或删除不存在的对象存在。

所以我的问题是，是否有办法避免用户单击两次按钮，这样它就不会发送 POST 请求 2 次，或者至少如果他在它消失之前再次单击它而不发送请求，或者那里是否可以在发送 POST 请求之前应用按钮 onclick 功能？

编辑：我解决了 Django 部分，所以如果用户单击 2 次加入或离开按钮，我不会收到错误消息，但现在用户仍然可以继续单击按钮，页面将继续重新加载，直到他/她停止点击我认为不好的同一个按钮。

这里是显示加入或离开按钮的 javascript，该按钮在页面加载或单击任一按钮时执行（如果登录的用户正在参加，我首先查看了服务员列表，因为我没有找到方法在 Django 模板中查询参加模型）：

script type="text/javascript">
    window.onload = function() {
        showJoinLeave();
    };
    function showJoinLeave() {
        var attendants = document.getElementsByClassName("attendant-username");
        var username = "{{ user.username }}";
        var joinButton = document.getElementById("event-info-join");
        var leaveButton = document.getElementById("event-info-leave");

        var is_attending = false;
        var attendant;
        for (attendant of attendants) {
            var attendant_name = attendant.innerHTML;
            if (attendant_name == username) {
                is_attending = true;
            }
        }
        
        if (is_attending===true){
            joinButton.style.display = "none";
            leaveButton.style.display = "flex";
        }
        
        else {
            joinButton.style.display = "flex";
            leaveButton.style.display = "none";
        }
    }

我的两个按钮：

<form action="{% url 'event-join' object.id %}" method="POST">
    {% csrf_token %}
    <button type="submit" id="event-info-join" class="icon" title="Join Event" onclick="showJoinLeave()">
        <i class="material-icons" title="Join Event">add</i>Join Event
    </button>
</form>
<form action="{% url 'event-leave' object.id %}" method="POST">
    {% csrf_token %}
    <button type="submit" id="event-info-leave" class="icon" title="Leave Event" onclick="showJoinLeave()">
        <i class="material-icons" title="Leave Event">add</i>Leave Event
    </button>
</form>

Answer 1

在隐藏按钮之前，我会选择pointer-events: none !important;，如下所示：

window.onload = function() {
    showJoinLeave();
};
function showJoinLeave() {
    var attendants = document.getElementsByClassName("attendant-username");
    var username = "{{ user.username }}";
    var joinButton = document.getElementById("event-info-join");
    var leaveButton = document.getElementById("event-info-leave");

    var is_attending = false;
    var attendant;
    for (attendant of attendants) {
        var attendant_name = attendant.innerHTML;
        if (attendant_name == username) {
            is_attending = true;
        }
    }
    
    if (is_attending===true){
        joinButton.style.pointerEvents = "none";
        joinButton.style.display = "none";
        leaveButton.style.pointerEvents = "auto";
        leaveButton.style.display = "flex";
    }
    
    else {
        joinButton.style.pointerEvents = "auto";
        joinButton.style.display = "flex";
        leaveButton.style.pointerEvents = "none";
        leaveButton.style.display = "none";
    }
}

指针事件：无

阻止指定 HTML 上的所有单击、状态和光标选项 元素

要了解更多关于pointer-events的信息，请查看以下链接：

https://css-tricks.com/almanac/properties/p/pointer-events/

Answer 2

我不具体了解 django，但通常您会在前端处理此问题，只需在单击按钮后立即将其设置为禁用即可。

这样，您不仅涵盖了技术方面，还涵盖了用户体验和可访问性方面。通过将按钮设置为禁用，用户可以立即获得点击反馈，并且知道他不能再次点击它。这也适用于残障用户（例如使用屏幕阅读器等）

我不建议设置pointer-events: none 或设置onclick = null，因为它不涵盖上述方面。

joinButton.disabled = true;