Javascript确认，捕获用户选择

Javascript confirm, capturing the user selection

本文关键字：用户 选择 确认 Javascript      更新时间：2024-06-24

在网站中实现了一个第三方插件，提示用户在删除之前进行确认。

confirmDelete: function (event) {
    var go_ahead = confirm("Are you sure you want to delete this draft? This action cannot be undone.");
    if (go_ahead) {
        return;
    } else {
        event.preventDefault();
    }
}

在我自己的js文件中，我想知道用户是点击了"取消"还是"确定"。

我可以判断用户何时被提示进入确认窗口（通过他们点击删除按钮），但我无法判断用户是点击了取消还是确定。

我想把这些代码分开，因为插件会定期更新。

$('button[name="delete"]').on('click', function(event) {
    console.log('delete btn clicked');
    console.log(event);
});

我在控制台中浏览了事件的内容，但没有发现任何内容。

将调用confirm的值返回给onClick处理程序，例如

var SomeObject = {
  confirmDelete: function () {
    return confirm("Are you sure you want to delete this draft? This action cannot be undone.");
  }
};

然后：

$('button[name="delete"]').on('click', function(event) {
    var confirmed = SomeObject.confirmDelete();
    if (!confirmed) {
        event.preventDefault();
        return;
    }
    // etc...
});

我从确认功能中删除了事件处理。这使它接近实际事件，并且看起来更规范的jQuery。它提高了可读性并简化了测试。

另一种选择

如果小部件为按钮分配了一个事件侦听器，则选定的答案将不起作用。这似乎很可能是基于所提供的代码。相反，它将显示两个确认对话框，这非常令人困惑。

作为一种变通方法，OP可能会覆盖窗口确认方法。替换方法可以拦截消息和结果。虽然我不主张覆盖本机方法，但这是一个实用的解决方案，我已经成功地将其用于遗留系统。

运行代码段以尝试

var confirm2 = window.confirm;
window.confirm = function(message) {
  var result = confirm2(message);
  debug.innerHTML += 'confirm: ' + message + ''nresult = ' + result + ''n';
  return result;
}
// Simulate 3rd Party Widget
var widget = (function() {
  var methods = {
    confirmDelete: function(event) {
      var go_ahead = confirm("Are you sure you want to delete this draft? This action cannot be undone.");
      if (go_ahead) {
        return;
      } else {
        event.preventDefault();
      }
    }
  }
  document.getElementsByName('delete')[0].addEventListener('click', methods.confirmDelete);
  return methods;
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button name="delete">Delete</button>
<xmp id="debug"></xmp>

相关文章：