Google Chrome middle button hack

by Bacher

HTML

<div class="outer">Outer
    <div class="subouter">Subouter
        <div class="medium">Medium
            <div class="subinner">Subinner
                <div class="inner">Inner
                    <br />
                    <button class="btn">Button</button>
                    <a href="#">Anchor</a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

div {
    padding: 5px 4px 10px 25px;
}

.outer    { background: #57b; }
.subouter { background: #58c; }
.medium   { background: #69d; }
.subinner { background: #6ae; }
.inner    { background: #9cf; }

JavaScript

$(function() {
    window.addEventListener('click', function(ev) {
        console.log('window click capture', ev);
    }, true);
    
    window.addEventListener('click', function(ev) {
        console.log('window click bubble', ev); 
    });
    
    $('body').on('click', 'a', function(ev) {
        console.log('jQuery Catch event');
        if (ev.which == 2) { console.log('mousewheel click'); }
    });
    
    $('a').on('click', function() {
        console.log('Direct event');
    });
   
});