A Pen by Anthony Young.

Exit-Intention-JS.markdown

Exit Intention JS

A Pen by Anthony Young on CodePen.

License.

index.html

<div class="exitintent"> </div>
 <div style="height:400px;">Move your mouse or scroll the document.</div>
<div id="info" style="height:65px; width:300px; left:300px; top:100px; background-color:#e0a0a0; position:fixed;"></div>

script.js

var _html = document.documentElement;
var delayTimer = null;
fn = function() {
    jQuery('.exitintent').append('<div style="color: red; padding: 5px;">Exiting intention triggered</div>');
  console.log('exit intention');
};

_html.onmouseleave = function(e) {
    e = e || window.event;
  if ('clientY' in e) {
    jQuery('.exitintent').append('<div style="color: red; padding: 5px;">clientY in e</div>');
    console.log('clientY in e');
    if (e.clientY < 0) {
        delayTimer = setTimeout(fn, 100);
        //alert('clientY');
    }
  } else if ('pageY' in e) {
    jQuery('.exitintent').append('<div style="color: red; padding: 5px;">pageY in e</div>');
    console.log('pageY in e');
    if (e.pageY < 0) {
        delayTimer = setTimeout(fn, 100);
        //alert('pageY');
    }
  } else if ('screenY' in e) {
    console.log('screenY in e');
    if (e.screenY < 100) {
        delayTimer = setTimeout(fn, 100);
        //alert('pageY');
    }
  }
};

_html.onmouseenter = function() {
    if (delayTimer) {
        clearTimeout(delayTimer);
        delayTimer = null;
    }
};



function UpdateInfo (event) {
    if ('pageX' in event) { // all browsers except IE before version 9
        var pageX = event.pageX;
        var pageY = event.pageY;
    }
    else {  // IE before version 9
        var pageX = event.clientX + document.documentElement.scrollLeft;
        var pageY = event.clientY + document.documentElement.scrollTop;
    }

    var message = "screenX: " + event.screenX + ", screenY: " + event.screenY + "<br />";
    message += "clientX: " + event.clientX + ", clientY: " + event.clientY + "<br />";
    message += "pageX: " + pageX + ", pageY: " + pageY;

    var info = document.getElementById ("info");
    info.innerHTML = message;
};

_html.onmousemove = function(e) {
    e = e || window.event;
    UpdateInfo(e);
};

style.css

.exitintent { border: 1px solid red; min-height: 60px !important; width: 298px; display: block; float: left; }