user2639176 user2639176 - 3 months ago 24
CSS Question

Overlay click tracking

Is it possible to overlay a div over say a block of links, and let them click on the links, but using jQuery

.click()
or something to track the click?

Ex:

<div id="overlay"></div>

<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>


I attempted something like:

#overlay {
position: absolute;
top: 220px;
right: 0;
width: 300px;
height: 280px;
background: #000;
z-index: 50;
color: #fff;
opacity: 0.8;
pointer-events: none;
}

$(function() {
$( "#overlay" ).click(function() {
alert( "Clicked" );
});
});


This lets me click through the div, but doesn't call the handler. And IE isn't supporting pointer-events.

Now I know I can add tracking to the links, etc.. But I want to overlay this over an image, over flash ads, etc..

Any possible options? Basically want the jquery click handler to run and the link to still open.

Answer

You don't even need a div overlay, just attach to the anchor's click handler. Or, if you really want to use an overlay, you simply get the coordinates from the click event, and then find the element at those coordinates. There are various ways to do this, but the easiest is to temporarily hide the overlay, find the element at the click coordinates using document.elementFromPoint() (in supported browsers), and then re-show the overlay element. Then fire click() on the element you found at the click coordinates (if any).

JSFiddle demo (using overlay, tested in Chrome and IE9): http://jsfiddle.net/RMkV8/4/

Markup:

<a id='link1' href="http://stackoverflow.com" target=_blank>Link 1</a> 
<a id='link2' href="http://google.com" target=_blank>Link 2</a> 
<a id='link3' href="javascript:;">Link 3</a> 
<a id='link4' href="javascript:;">Link 4</a> 
<ul id='output'></ul>
<div id='overlay'></div>

CSS:

#overlay
{
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 40px;
    background-color: rgba(0,0,0,0.5);
}

Javascript:

var clickHistory = [];

$("#overlay").click(function(event)
                    {
                        var x = event.pageX || event.clientX;
                        var y = event.pageY || event.clientY;
                        $("#overlay").hide();
                        var clickedElem = document.elementFromPoint(x, y);
                        $("#overlay").show();
                        $("#output").append("<li>Position: " + x + "," + y + "; Id: " + clickedElem.id + "; URL: " + clickedElem.href + "</li>");

                        clickHistory[clickHistory.length] = {Id: clickedElem.id, Url: clickedElem.href };

                        clickedElem.click();                        
                    });

// could push clickHistory to server via AJAX for tracking if desired...

JSFiddle demo (not using overlay): http://jsfiddle.net/RMkV8/1/

Markup:

<a id='link1' href="http://stackoverflow.com/" target=_blank>Link 1</a> 
<a id='link2' href="http://google.com/" target=_blank>Link 2</a> 
<a id='link3' href="javascript:;">Link 3</a> 
<a id='link4' href="javascript:;">Link 4</a> 
<ul id='output'></ul>

Javascript:

var clickHistory = [];

$("a").click(function()
             {            
                 clickHistory[clickHistory.length] = {Id: this.id, Url: this.href };
                 $("#output").append("<li>ID: " + this.id + ", URL: " + this.href + "</li>");
             });

// could push clickHistory to server via AJAX for tracking if desired...