颤振对话框阻止关闭 - TypeScript

在Web应用程序中，当用户开始填写表单并想要关闭选项卡或浏览器窗口时，我们通常会出现一个对话框，询问用户是否确定要离开该页面。这种对话框的目的是防止用户误操作而丢失尚未保存的数据。

在本文中，我们将讨论如何使用TypeScript编写一个颤振对话框，使其更加引人注目，防止用户不小心关闭页面。

实现

我们可以使用 window.onbeforeunload 方法来处理用户关闭页面或浏览器选项卡的事件。这个函数将在用户尝试关闭页面时被调用，并且我们可以在其中显示颤振对话框。

window.onbeforeunload = function() {
  return true;
};

在上述代码中，我们添加了一个名为 onbeforeunload 的处理程序，并且在其中返回了一个 'true' 值。这将导致浏览器显示默认的对话框，询问用户是否确认离开该页面。

如果我们想要显示我们自己的颤振对话框，我们需要覆盖默认的行为。通过再次返回 'true'，我们可以阻止页面关闭，并显示自己的对话框。

window.onbeforeunload = function() {
  return 'Are you sure you want to leave this page?';
};

现在，如果用户想要关闭该页面，他们会看到一个包含我们自定义消息的对话框。

但是，这个对话框还不足以吸引用户的注意力。我们可以稍微增加一些动画，使其颤振起来。

let shouldStopUnload = false;
window.addEventListener('beforeunload', event => {
  if (!shouldStopUnload) {
    event.preventDefault();
    event.returnValue = '';
    shakeDialog();
  }
});

function shakeDialog() {
  const dialog = document.querySelector('.confirmation-dialog');
  if (!dialog) return;

  let interval = null;
  let count = 0;
  const originalX = dialog.style.left;
  const shakeDistance = 10;

  const shake = () => {
    clearInterval(interval);

    if (count >= 5) {
      shouldStopUnload = true;
      window.removeEventListener('mouseout', shake);
      dialog.style.left = originalX;
      return;
    }

    const newX = parseInt(originalX, 10) + shakeDistance * Math.pow(-1, count);
    dialog.style.left = `${newX}px`;

    count++;
    interval = setInterval(shake, 50);
  };

  shake();
}

在上述代码中，我们添加了一个动画效果，将对话框向左右颤动 10px，重复 5 次。这个动画将在用户尝试关闭页面时触发。

我们还添加了一个名为 shouldStopUnload 的变量，用于跟踪是否应该展示默认的对话框并允许页面关闭。

最后，我们需要为对话框添加一些 CSS 样式，让其垂直居中并显示在页面中央。

.confirmation-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

结论

在本文中，我们讨论了如何使用TypeScript编写一个颤振对话框，防止用户不小心关闭页面或浏览器选项卡。我们使用 window.onbeforeunload 方法来触发对话框，并添加了一些动画效果以增加注意力。最后，我们还添加了一些样式，让对话框垂直居中并显示在页面中央。

window.onbeforeunload = function() {
  return 'Are you sure you want to leave this page?';
};

let shouldStopUnload = false;
window.addEventListener('beforeunload', event => {
  if (!shouldStopUnload) {
    event.preventDefault();
    event.returnValue = '';
    shakeDialog();
  }
});

function shakeDialog() {
  const dialog = document.querySelector('.confirmation-dialog');
  if (!dialog) return;

  let interval = null;
  let count = 0;
  const originalX = dialog.style.left;
  const shakeDistance = 10;

  const shake = () => {
    clearInterval(interval);

    if (count >= 5) {
      shouldStopUnload = true;
      window.removeEventListener('mouseout', shake);
      dialog.style.left = originalX;
      return;
    }

    const newX = parseInt(originalX, 10) + shakeDistance * Math.pow(-1, count);
    dialog.style.left = `${newX}px`;

    count++;
    interval = setInterval(shake, 50);
  };

  shake();
}

<div class="confirmation-dialog">
  Are you sure you want to leave this page?
</div>

.confirmation-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}