js如何监听alert点击

JS如何监听alert点击、使用Promise封装alert、创建自定义模态框

在JavaScript中，alert方法是用来显示一个警告对话框，用户必须点击“确定”按钮才能关闭这个对话框并继续执行代码。但是，原生的alert方法并没有提供直接的方法来监听用户何时点击了“确定”按钮。为了实现这一功能，我们可以使用Promise封装alert，或者创建一个自定义模态框。接下来将详细介绍这些方法。

一、使用Promise封装alert

1、为什么选择Promise

使用Promise封装alert方法可以让我们更方便地监听用户点击“确定”按钮的事件。Promise对象提供了一种简洁的方式来处理异步操作，并且可以与现代JavaScript的async/await语法一起使用。

2、实现Promise封装alert

function alertWithPromise(message) {
    return new Promise((resolve) => {
        alert(message);
        resolve();
    });
}
// 使用示例
alertWithPromise('This is a custom alert').then(() => {
    console.log('User clicked OK');
});

在这个实现中，alertWithPromise函数创建并返回一个Promise对象。在Promise的回调函数中，我们调用原生的alert方法，并在用户点击“确定”按钮关闭对话框后，调用resolve函数。这使得我们可以在then方法中处理用户点击“确定”按钮后的逻辑。

二、创建自定义模态框

1、为什么选择自定义模态框

自定义模态框不仅可以实现监听用户点击的功能，还可以提供更丰富的功能和更好的用户体验。例如，我们可以自定义模态框的样式、添加多个按钮、处理不同按钮的点击事件等等。

2、实现自定义模态框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Modal Example</title>
    <style>
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.4);
            padding-top: 60px;
        }
        .modal-content {
            background-color: #fefefe;
            margin: 5% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
<!-- The Modal -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p id="modal-message"></p>
    <button id="modal-ok">OK</button>
  </div>
</div>
<script>
    function showModal(message) {
        return new Promise((resolve) => {
            const modal = document.getElementById("myModal");
            const modalMessage = document.getElementById("modal-message");
            const modalOk = document.getElementById("modal-ok");
            const span = document.getElementsByClassName("close")[0];
            modalMessage.textContent = message;
            modal.style.display = "block";
            modalOk.onclick = function() {
                modal.style.display = "none";
                resolve();
            }
            span.onclick = function() {
                modal.style.display = "none";
                resolve();
            }
            window.onclick = function(event) {
                if (event.target == modal) {
                    modal.style.display = "none";
                    resolve();
                }
            }
        });
    }
    // 使用示例
    showModal('This is a custom modal').then(() => {
        console.log('User clicked OK');
    });
</script>
</body>
</html>

在这个实现中，我们创建了一个自定义模态框，并使用Promise封装了模态框的显示和隐藏逻辑。模态框包含一个消息区域、一个“确定”按钮和一个关闭按钮。用户点击任意按钮或模态框外部时，模态框都会隐藏，并且Promise会被解决。

三、综合对比

1、简单对比

原生alert方法：简单易用，但无法直接监听用户点击事件，样式无法自定义。
Promise封装alert方法：在原生alert的基础上增加了监听功能，但样式仍无法自定义。
自定义模态框：功能最强大，可以完全自定义样式和行为，但实现起来相对复杂。

2、推荐使用场景

原生alert方法：适用于简单的警告提示，不需要额外的监听逻辑和自定义样式。
Promise封装alert方法：适用于需要简单监听用户点击事件的场景。
自定义模态框：适用于需要复杂交互和自定义样式的场景，例如多按钮对话框、确认对话框等。

四、总结

在JavaScript中，虽然原生的alert方法没有提供直接的监听功能，但我们可以通过Promise封装或自定义模态框来实现这一功能。Promise封装alert方法简单易用，而自定义模态框则提供了更强大的功能和更好的用户体验。根据实际需求选择合适的方法，可以更好地满足不同场景的需求。

在团队协作项目中，使用研发项目管理系统PingCode和通用项目协作软件Worktile可以有效提高团队的协作效率和项目管理水平。这些工具不仅提供了丰富的功能，还支持自定义工作流程和任务管理，适用于各种类型的项目和团队。