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。

 

 

我寫了一個測試例子：

<div class='links'>
    <a href='#'>test1</a>
    <a href='javascript:;'>test2</a>
    <a href='javascript:;' onclick='alert("test3")'>test3</a>
    <a href='#' onclick='alert("test4")'>test4</a>
</div>

<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函數里，判斷當前鼠標的位置，如果在某一范圍內則認為是點擊了新浪微游戲的那些東東，不顯示提示。

/**
 * 獲取鼠標在頁面上的位置
 * @param ev  觸發的事件
 * @return  x:鼠標在頁面上的橫向位置, y:鼠標在頁面上的縱向位置
 */

function getMousePoint(ev) {
  var point = {
    x: 0,
    y: 0
  };
  if (typeof window.pageYOffset != 'undefined') {
    point.x = window.pageXOffset;
    point.y = window.pageYOffset;
  } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
    point.x = document.documentElement.scrollLeft;
    point.y = document.documentElement.scrollTop;
  } else if (typeof document.body != 'undefined') {
    point.x = document.body.scrollLeft;
    point.y = document.body.scrollTop;
  }
  point.x += ev.clientX;
  point.y += ev.clientY;
  return point;
}

function bindWindowEvent() {
    window.onbeforeunload = function (evt) {
        evt = evt || window.event;

        var obj = getMousePoint(evt);
        if (obj.y < 76 && obj.y > 0) {
            return ;
        }

        var msg = '嘻嘻嘻';

        return msg;
    };
}

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