Cancelling onBeforeUnload

HTML

<a id="l1" href="javascript:void(0)">attachEvent() without 'return false'</a>
<br><br>	
<a id="l2" href="javascript:void(0)">attachEvent() with 'return false'</a>
<br><br>
<a id="l3" href="javascript:void(0)">addEventListener() without 'return false'</a>
<br><br>	
<a id="l4" href="javascript:void(0)">addEventListener() with 'return false'</a>
<br>
<br>
<button onclick="clear_background()">reset</button>
<div id="click">klick!</div>

CSS

#click {
    position: absolute;
    left: 200px;
    top: 250px;
    font-size: 48px;
    font-weight: bold;
    display: none;
}

JavaScript

var link1 = document.getElementById("l1");
var link2 = document.getElementById("l2");
var link3 = document.getElementById("l3");
var link4 = document.getElementById("l4");
var clickAlert = document.getElementById("click");

if (window.attachEvent) {
    link1.attachEvent("onclick", function () {
        displayClick();
    });

    link2.attachEvent("onclick", function () {
        displayClick();
        return false;
    });
}

if (window.addEventListener) {
    link3.addEventListener("click", function () {
        displayClick();
    }, false);

    link4.addEventListener("click", function () {
        displayClick();
        return false;
    }, false);
}

document.body.onbeforeunload = unload;

function displayClick() {
    clickAlert.style.display = "block";
    setTimeout(function() {
        clickAlert.style.display = "none";
    }, 500);
}

function unload() {
    document.body.style.background = "blue";
}

function clear_background() {
    document.body.style.background = "white";
}