addEventListener与onbeforeunload无法正常工作。

Question

window.addEventListener("onbeforeunload",function() {return "are you sure?"});

^ 这似乎完全不起作用...页面将会在没有显示确认框的情况下关闭...

我意识到...

window.onbeforeunload = function() {return "are you sure?"}

这样做可以运行，但我想要增加功能（例如向“onbeforeunload”函数添加许多事件侦听器），而不是完全重写函数！

- zconnelly13

Answer 1

从onbeforeunload中删除on。

另外，请注意addEventListener在旧版本IE和其他浏览器中可能无法正常工作。如果您想要一致的事件绑定，请使用库。

- meder omuraliev

---

这是一个跨浏览器的 addEvent 解决方案：function addEvent(evt,fn,useCapture){if(this.addEventListener){this.addEventListener(evt,fn,useCapture);return true;}else if(this.attachEvent){var r=this.attachEvent('on'+evt,fn);return r;}else this['on'+evt]=fn;}Object.prototype.addEvent=addEvent; （将函数写成这样：object.addEvent(event,function,useCapture);）。 - Alexandre Khoury

似乎在最新的FF-14.0.1中不再起作用。 - Marcin

@Marcin，仅返回字符串已经不够了。您必须设置event.returnValue（文档）。 - some

为什么这个不再起作用了？浏览器改变了吗？我正在使用这个：window.addEventListener("beforeunload",() => {return 'Stop')}; - Shayan

Answer 2

在Mozilla开发者网络上有一个"几乎跨浏览器工作的例子"beforeunload事件API参考，使用他们的代码。

那是在2014年

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";

  (e || window.event).returnValue = confirmationMessage;     //Gecko + IE
  return confirmationMessage;                                //Webkit, Safari, Chrome etc.
});

在2020年，现在是

window.addEventListener('beforeunload', (event) => {
  // Cancel the event as stated by the standard.
  event.preventDefault();
  // Chrome requires returnValue to be set.
  event.returnValue = '';
});

以上全选？

如果我需要这个，我会想把这个工作交给一个库来完成。如果我必须自己做的话，我想可以选择以上所有方法，以确保万无一失。

• 不要尝试设置有意义的消息文本，这只会导致不一致的用户体验
• event = event || window.event
• event.preventDefault()，可能在检查了preventDefault是否被定义之后再使用？
• event.returnValue = ''
• return ''

- user7610

---

无论我如何尝试，都无法自定义消息。 - toddmo

@toddmo，现在浏览器不显示自定义消息了。这是一项安全/用户体验功能。请参见https://www.chromestatus.com/feature/5349061406228480或链接的MDN页面。这是答案编写后出现的新情况。 - user7610

谢谢，我终于也看到了 :) - toddmo

它对我不起作用。如果我调试代码，它就能工作，但如果我不调试它，它就不能工作并且只是退出。 - Naomi

无法感谢你的足够。 - Siva-Dev-Wizard

Answer 3

EventListeners没有前缀on，但对于EventHandlers来说是适用的，甚至可以说是必要的。

因此，请记住：

EventHandlers = 前缀 on

EventListeners = 前缀 off

- Tayeaba Mila