0

是否可以将一个 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 点击处理程序运行并且链接仍然打开。

4

2 回答 2

2

您甚至不需要 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...
于 2013-10-24T20:56:29.033 回答
0

不可能有覆盖并允许单击下面的元素。

你必须寻找另一种解决方案。您可以考虑将事件附加到所有链接，以便跟踪点击。

于 2013-10-24T20:51:05.320 回答