onbeforeunload事件被a链接触发的问题

onbeforeunload本身并非W3C DOM-Event标准事件,只不过在很多时候国内的流氓做法就是离开页面,直接弹出收藏本网页的提示(虽然我很讨厌这种做法,但事实上很多公司一直都在这样默默地强奸用户…)

言归正传,我遇到的问题是,自己的游戏上了新浪微游戏,在新浪微游戏的顶部有它们的导航,但是点击里面一些按钮时就会触发游戏里面的window.onbeforeunload事件…

搜索了一下,找到这篇文章:BX2047: 各浏览器对 onbeforeunload 事件的支持与触发条件实现有差异

根据 MSDN 中描述,IE 的 onbeforeunload 事件可由以下这些条件触发:

  • 关闭当前浏览器窗口。
  • 导航到另一个进入一个新的地址或选择一个喜欢的位置。
  • 单击后退,前进,刷新,或主页按钮。
  • 点击一个链接到新页面。
  • 调用 超链接的 click 方法。
  • 调用 document.write 方法。
  • 调用 document.open 方法。
  • 调用 document.close 方法。
  • 调用 window.close 方法。
  • 调用 window.open 方法,窗口名称设置值为 _self。
  • 调用 window.navigate 或 NavigateAndFind 方法。
  • 调用 location.replace 方法。
  • 调用 location.reload 方法。
  • 指定一个 location.href 属性的新值。
  • 使用 submit 按键提交表单,或调用 form.submit 方法。

更详细的说明可以查考 MSDN 原文:onbeforeunload Event

我写了一个测试例子:

1: <div class='links'>

       2:     <a href='#'>test1</a>

       3:     <a href='javascript:;'>test2</a>

       4:     <a href='javascript:;' onclick='alert("test3")'>test3</a>

       5:     <a href='#' onclick='alert("test4")'>test4</a>

       6: </div>

       7:  

       8: <iframe src="http://b.com/xx/xxx.html" frameborder="no" scrolling="no" id="app_frame" name="app_frame" style="height: 600px; width: 100%;"></iframe>

如果iframe中有window.onbeforeunload事件,在点击链接test2、test3时会触发iframe内的window.onbeforeunload事件,test1、test4则不会,尽管页面与iframe并非同一域。

我知道会有很多办法避免这种情况发生,比如改父层的实现==,但是这个页面是新浪微游戏的,我根本不可能有权力去要求什么…

所以想到一个办法是,在window.onbeforeunload函数里,判断当前鼠标的位置,如果在某一范围内则认为是点击了新浪微游戏的那些东东,不显示提示。

1: /**

       2:  * 获取鼠标在页面上的位置

       3:  * @param ev  触发的事件

       4:  * @return  x:鼠标在页面上的横向位置, y:鼠标在页面上的纵向位置

       5:  */

       6:  

       7: function getMousePoint(ev) {

       8:   var point = {

       9:     x: 0,

      10:     y: 0

      11:   };

      12:   if (typeof window.pageYOffset != 'undefined') {

      13:     point.x = window.pageXOffset;

      14:     point.y = window.pageYOffset;

      15:   } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {

      16:     point.x = document.documentElement.scrollLeft;

      17:     point.y = document.documentElement.scrollTop;

      18:   } else if (typeof document.body != 'undefined') {

      19:     point.x = document.body.scrollLeft;

      20:     point.y = document.body.scrollTop;

      21:   }

      22:   point.x += ev.clientX;

      23:   point.y += ev.clientY;

      24:   return point;

      25: }

      26:  

      27: function bindWindowEvent() {

      28:     window.onbeforeunload = function (evt) {

      29:         evt = evt || window.event;

      30:         

      31:         var obj = getMousePoint(evt);

      32:         if (obj.y < 76 && obj.y > 0) {

      33:             return ;

      34:         }

      35:  

      36:         var msg = '嘻嘻嘻';

      37:         

      38:         return msg;

      39:     };

      40: }

      41:  

      42: bindWindowEvent();

希望各位达人能提供更好的解决方法…

本文参考:

1、BX2047: 各浏览器对 onbeforeunload 事件的支持与触发条件实现有差异

2、onbeforeunload与a标签在IE中的冲突bug

3、Can I prevent window.onbeforeunload from being called when doing an AJAX call

4、onbeforeunload event

5、Get Cursor Position with JavaScript

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏梁源的专栏

基于 vue-cli + webpack 开发实践:《体育视频播放页》

《体育视频播放页》基于vue-cli+webpack开发,此次开发总结,将会总结开发过程中涉及到的知识点以及开发技巧,希望能帮助到想要在工作中使用Vue.js开...

1K4
来自专栏一“技”之长

iOS9系列专题一——3D Touch 原

        在iphone6s问世之后,很多果粉都争先要体验3D Touch给用户带来的额外维度上的交互,这个设计之所以叫做3D Touch,其原理上是增加...

792
来自专栏大前端开发

从编程小白到全栈开发:了解事件机制

在上一篇文章中,我们初步了解了在HTML中处理用户操作的知识,最主要的,就是如何对指定的DOM元素添加事件监听以获取用户操作,并进行后续的处理。这里所使用到的这...

834
来自专栏web编程技术分享

【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第三节)

3748
来自专栏hightopo

基于 HTML5 的 Web SCADA 报表

6293
来自专栏听雨堂

【8】数据浏览表格的快速输出

阅读目录 用什么来展示数据列表? 表格还是列表? 表头 对表格输出的封装 生成表格的实例 功能的扩展 在页面数据和控件的自动交换机制中,我们通过Pa...

2395
来自专栏韩东吉的Unity杂货铺

零基础入门 4: 窗口介绍(完)

上一篇将Unity里几个比较重要的窗口先进行了讲解,以及如何自定义窗口布局,不知道大家都消化的怎么样,今天这篇窗口介绍,将把剩余window的窗口一一进行介绍。

1561
来自专栏前端知识分享

第136天:Web前端面试题总结(理论)

  a. 请求数量:合并脚本和样式表,CSS Sprites,拆分初始化负载,划分主域

5494
来自专栏企鹅号快讯

前端插件以及部分细分网址梳理

图来源网络 前端插件以及部分细分网址梳理 插件 parallel.js: 前后端通用的一个并行库 zepto: 用于现代浏览器的兼容 jQuery 的库 tot...

2929
来自专栏HT

基于 HTML5 的 Web SCADA 报表

背景 最近在一个 SCADA 项目中遇到了在 Web 页面中展示设备报表的需求。一个完整的报表,一般包含了筛选操作区、表格、Chart、展板等多种元素,而其中的...

5429

扫码关注云+社区

领取腾讯云代金券