时间戳

首页 > 解决方案 > 离开页面之前的 Javascript，除非单击按类或 ID 的元素

javascript - 离开页面之前的 Javascript，除非单击按类或 ID 的元素

问题描述

我有以下代码可以很好地防止用户在保存更改之前离开页面。我需要做的不是当用户按 ID 或类名单击按钮时显示消息

因此，在这种情况下，如果用户尝试刷新页面，则返回历史记录或任何将出现的消息，除非我不希望在用户单击保存按钮时出现该消息。这可能吗？

HTML

<button id="save">Save Changes</button>
or
<button class="save">Save Changes</button>

JAVASCRIPT

<script type='text/javascript'>
function goodbye(e) {
    if(!e) e = window.event;
    e.cancelBubble = true;
    e.returnValue = 'You sure you want to leave?';
    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}
window.onbeforeunload=goodbye;
</script>

标签： javascript

解决方案

在 for 上添加一个事件侦听window器beforeunload，并在单击按钮时将其删除

小提琴

function goodbye(e) {
  if (!e) e = window.event;
  e.cancelBubble = true;
  e.returnValue = 'You sure you want to leave?';
  if (e.stopPropagation) {
    e.stopPropagation();
    e.preventDefault();
  }
}

window.addEventListener('beforeunload', goodbye);

document.querySelector('#save').addEventListener('click', function() {
  window.removeEventListener('beforeunload', goodbye);
});
<button id="save">Save Changes</button>

推荐阅读