Question

是否可以将div叠加在一个链接块上，让他们点击链接，但是使用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叠加，只需附加到锚点击处理程序即可。或者，如果您确实想要使用叠加层，只需从click事件中获取坐标，然后在这些坐标处找到该元素。有多种方法可以做到这一点，但最简单的方法是暂时隐藏叠加层，使用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...

Answer 2

不可能有叠加并允许点击下面的元素。

您必须寻找其他解决方案。您可以考虑将事件附加到所有链接，以便跟踪点击次数。

叠加点击跟踪

2 个答案: