javascript - 叠加点击跟踪

Question

是否可以将一个 div 覆盖在一个链接 block 上，让他们点击链接，但使用 jQuery .click() 或其他东西来跟踪点击？

例如:

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

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

我尝试了类似的东西:

#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" );
    });
});

这让我可以点击 div，但不会调用处理程序。 IE 不支持指针事件。

现在我知道我可以向链接等添加跟踪。但我想将其覆盖在图像、Flash 广告等上。

有什么可能的选择吗？基本上希望 jquery 点击处理程序运行并且链接仍然打开。

Answer 1

您甚至不需要 div 叠加层，只需附加到 anchor 的点击处理程序即可。或者，如果您真的想使用叠加层，只需从单击事件中获取坐标，然后在这些坐标处找到元素。有多种方法可以做到这一点，但最简单的方法是暂时隐藏叠加层，使用 document.elementFromPoint()(在支持的浏览器中)找到点击坐标处的元素，然后重新显示叠加元素。然后对您在点击坐标(如果有)找到的元素触发 click()。

JSFiddle 演示(使用覆盖，在 Chrome 和 IE9 中测试):http://jsfiddle.net/RMkV8/4/

标记:

<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 演示(不使用覆盖):http://jsfiddle.net/RMkV8/1/

标记:

<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...