Node Click troubleshooter

Created to discover a click even failure on ThinkPad Carbon X1's in Chrome

by jamesdh

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<div id="holder"></div>
<div id="output">
    Try to click & drag the icon, then copy the following output into the support ticket:<br/><br/>
    
<ul id="results"></ul>
</div>

CSS

body {
    background: #FFF;
    font: 300 100.1% "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
}
#holder {
    height: 50%
    position: absolute;
    width: 100%;
    background: "#DDDDDD";
}
#output {
    top: 50%;
    position: absolute;
    width: 100%;
}

#results {
    top: 20px;
    padding-left: 20px;
}

JavaScript

var raph = Raphael("holder", '100%', '50%');
raph.canvas.style.backgroundColor = '#DDD';
var icon = raph.image("http://www.pfizer.com/sites/default/files/images/common/pfizer.png", 115, 125, 76, 43);

function printEvent(e, prepend) {
    console.log(prepend + ": %o", e);    
    $("#results").append("<li>(" + prepend + ") " + e.type + ':' + e.keyCode + ':' + e.target.nodeName + '</li>');
}

var debouncedLog = _.debounce(function(e, prepend) {
    printEvent(e, prepend);   
}, 500, true);

function start(x, y, e) {
    console.log(icon);
    this.dx = this.dy = 0;
    printEvent(e, 'Raphael.drag.start');
}

function move(dx, dy, x, y, e) {
    var deltaX = dx - this.dx;
    var deltaY = dy - this.dy;
    icon.attr({x: deltaX + icon.attr('x'), y: deltaY + icon.attr('y')});
    this.dx = dx;
    this.dy = dy;
    debouncedLog(e, 'Raphael.drag.move');
}

function end(e) {
    this.dx = this.dy = 0;
    printEvent(e, 'Raphael.drag.end');
}

icon.drag(move, start, end);

icon.click(function(e) {
    printEvent(e, 'Raphael.click');
});

$(icon.node).on('scroll click dblclick mousedown mouseup mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error touchstart touchend touchcancel touchleave touchmove', function(e) {
   printEvent(e, 'jQuery.on'); 
});