Question

我有一个功能，当从Select下拉列表中选择一个值时，会要求用户进行确认。使用常规JavaScript confirm()时，更改事件不会在未单击确认的情况下获取新选择的值。这可以在this Fiddle.

中看到

选择值后，用户点击取消，alert对话框中会显示相同的值。当用户单击确认时，将显示新选择的值。

但是，我想使用SweetAlert。使用SweetAlert更改值时，即使选择确认或取消，也会发生更改。正如this Fiddle.中所示，当选择一个值时，选择后会立即显示alert对话框，而不像以某种方式阻止事件的纯JS Confirm()。

我希望达到与JS confirm()相同的效果，当用户未点击change时，confirm事件不被触发或cancel，使用SweetAlert。

除了演示问题的 Fiddles 之外，这里是我正在使用的代码：

一些简单的HTML选择：

<select id="dropdownId">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

JavaScript confirm()版本（执行它需要做的事情）：

var prev_val;
$('#dropdownId').focus(function () {
    prev_val = $(this).val();
}).change(function (e) {
    var select = this;
    $(this).blur();

    var success = confirm('Are you sure you want to change the Dropdown?');
    if (success) {
        // Other changed code would be here...
    } else {
        $(this).val(prev_val);
        return false;
    }
});

$('#dropdownId').change(function (e) {
    alert($(this).val());
});

SweetAlert版本，更改事件应等待SweetAlert对话框的响应。

var prev_val;
$('#dropdownId').focus(function () {
    prev_val = $(this).val();
}).change(function (e) {
    var select = this;
    $(this).blur();

    return swal({
        title: "Are you sure?",
        text: "Change dropdown select?",
        type: "warning",
        showCancelButton: true,
        confirmButtonText: "Yes!",
        cancelButtonText: "No!",
        closeOnConfirm: true,
        closeOnCancel: true
    },
    function (isConfirm) {
        if (isConfirm) {
            return true;
        } else {
            $(select).val(prev_val);
            return false;
        }
    });
});

$('#dropdownId').change(function (e) {
    alert($(this).val());
});

修改

将逻辑移动到对话框的confirm处理程序并不能解决此问题。我正在使用一个框架（Apache Tapestry）来监听select上的更改事件。当使用解决方案 RRR 时，在this fiddle中，仍然会发生更改事件。这仍然会导致它向我的后端发起事件，这与JS confirm()不同，后者在点击确认之前不会更改值。

编辑2：

我的问题似乎并不那么清楚。以下是我尝试的步骤，以展示问题的根源：

使用来自this fiddle.的JS confirm时会发生以下情况：

我点击了一个值
要求确认
确认后，会记录新值。取消时，它会记录原始值。

使用SweetAlert对话框时，使用this fiddle.会发生以下情况：

我点击了一个值
在确认/取消之前记录新选择的值
确认/取消时我可以执行逻辑。

使用this fiddle.中由 RRR 编辑的SweetAlert对话框时，会发生以下情况：

我点击了一个值
在确认/取消之前记录新选择的值
确认/取消时，显示警告

我和RRR的SweetAlert示例都有相同的问题。即，步骤2.不是它记录的事实，而是值实际改变的事实。与第一个纯JS示例不同，除非确认被单击，否则值 NOT 会发生变化。

Answer 1

确定。这是问题所在。

你在onchange事件中调用2个不同的动作：
1-大功能......
2-测试警报。

两者同时发生。 ＆lt; - 这就是混乱！

这就是为什么你认为swal不会“等待”从用户那里得到答案。

试试这个...... 看看你的console.log消息：

var prev_val;

$('#dropdownId').focus(function () {
    prev_val = $(this).val();
    console.log("On focus event value : "+prev_val);    // ADDED
    }).change(function (e) {

        var select = this;
        console.log("At the BEGINNING of the change event : "+$(select).val()); // ADDED
        $(this).blur();

        swal({  // REMOVED return in front of it
            title: "Are you sure?",
            text: "Change dropdown select?",
            type: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes!",
            cancelButtonText: "No!",
            closeOnConfirm: true,   // These are default.. useless to specify
            closeOnCancel: true     // These are default.. useless to specify
        },
        function (isConfirm) {
            if (isConfirm) {
                //return true;  // no need to return anything - commented out
                console.log("swal YES");
                console.log("At the END of the change event : "+$(select).val());
            } else {
                $(select).val(prev_val);
                //return false; // no need to return anything - commented out
                console.log("swal NO");
                console.log("At the END of the change event : "+$(select).val());
            }
            // Here is a callback final test alert!
            alert("Callback alert: "+$(select).val());
        });
    });

/*$('#dropdownId').change(function (e) {    // This was a bad idea ! ;)
    alert($(this).val());
});*/

Answer 2

就我而言，甜蜜警报2阻止了我绑定的事件处理程序：

    Swal.fire( // Not works - Nothing will happen onclick
      {html: `<button id="btn1" onclick="alert('clicked')">Delete</button>`,
    )

因此，我在模式打开时在JavaScript中绑定了事件处理程序：

    Swal.fire(
      {html: `<button id="btn1">Delete</button>`,
      onOpen: () => {document.querySelector('#btn1').onclick = () => {alert('clicked')}
    )

SweetAlert：阻止事件，如JavaScript Alert（）

2 个答案: