Question

设置舞台：

我有一层在另一层之上。底层包含链接（简单图像），顶层包含高级工具提示，如底层的悬停。这些工具提示可能很大（它们可以轻松地重叠到其他链接上，并且几乎总是与它们作为工具提示的链接重叠）。

我的问题：

我希望我的鼠标悬停事件发生在底层，然后在鼠标悬停时显示上层的工具提示。这样，当您离开底部链接时，上层的工具提示就会消失，新链接的工具提示就会显示出来。

如何从顶层获取事件并将其传递到下面的图层？这样顶层就是事件透明的。

示例HTML：

jQuery(document).ready(function(){
	jQuery('div.tile').click(function(){
		jQuery('#log').html(this.id + " clicked");
		return false;
	});
	jQuery('div#top').click(function(){
		jQuery('#log').html('Top clicked');
		return false;
	});
});

.tile { width: 100px; height: 100px; position: absolute; }
.tile:hover, over:hover {border: 1px solid black;}
.over { width: 100px; height: 100px; position: absolute; display:none}
.stack, #sandwich { width: 400px; height: 400px; position: absolute; }
#tile1 {top: 50px; left: 50px;}
#tile2 {top: 75px; left: 10px;}
#tile3 {top: 150px; left: 310px;}
#tile4 {top: 250px; left: 250px;}
#tile5 {top: 150px; left: 150px;}
#over1 {top: 55px; left: 55px;}
#over2 {top: 80px; left: 15px;}
#over3 {top: 155px; left: 315px;}
#over4 {top: 255px; left: 255px;}
#over5 {top: 155px; left: 155px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<div id="sandwich">
	<div class="stack" id="bottom">
		<div class="tile" id="tile1">1</div>
		<div class="tile" id="tile2">2</div>
		<div class="tile" id="tile3">3</div>
		<div class="tile" id="tile4">4</div>
		<div class="tile" id="tile5">5</div>
	</div>
	<div class="stack" id="top">
		<div class="over" id="over1">Tooltip for 1</div>
		<div class="over" id="over2">Tooltip for 2</div>
		<div class="over" id="over3">Tooltip for 3</div>
		<div class="over" id="over4">Tooltip for 4</div>
		<div class="over" id="over5">Tooltip for 5</div>
	</div>
</div>
<div id="log"></div>

使用示例javascript我已经验证事件的工作正常，并且只点击了top。但我基本上希望“结束”项目是事件透明的。

Answer 1

希望我理解OP，但您可以在原始事件发生后在任何选择器上复制事件：http://jsfiddle.net/Cr9Kt/1/

在链接的示例中，我将事件放在顶层，并在底层创建一个类似的事件。您可以通过单击每个元素（而不是顶部和底部作为一个整体）来进一步完成此操作。

这是另一个问题的借鉴主意：Triggering a JavaScript click() event at specific coordinates

Answer 2

我不太确定我理解你要求的是什么。听起来有点像工具提示。以下是如何使用jQuery，CSS和HTML进行工具提示的示例。

http://jsbin.com/ilali3/13/edit

希望能让你开始。如果你添加更多细节，或者修改jsbin的更多细节，我们可以迭代一点。

我更新了一些示例，包括使用jQuery将工具提示信息存储到html元素本身。这有点清洁。

鲍勃

Answer 3

这可能看起来过于复杂和不优雅......它会伪造你的功能......但它有效;）

$(document).ready(function(){
    var tileData = new Array();

    // get coordinate data for each tile
    $('div.tile').each(function(){
        var tileInfo = {};   
        tileInfo.id = this.id;
        tileInfo.text = $(this).text();
        tileInfo.width = $(this).outerWidth();
        tileInfo.height = $(this).outerHeight();
        tileInfo.position = $(this).position();
        tileInfo.coords = {};
        tileInfo.coords.top = tileInfo.position.top;
        tileInfo.coords.right = tileInfo.position.left + tileInfo.width;
        tileInfo.coords.bottom = tileInfo.position.top + tileInfo.height;
        tileInfo.coords.left = tileInfo.position.left;

        tileData.push(tileInfo);
    });

    $('div.tile').click(function(){
        $('#log').html(this.id + " clicked");
        return false;
    })       

    $('div#top').click(function(event){
        $('#log').html('Top clicked');

        // try to find tile under your mouse click
        for(i=0; i<tileData.length;i++){
            if(
                event.pageX >= tileData[i].coords.left &&
                event.pageX <= tileData[i].coords.right &&
                event.pageY >= tileData[i].coords.top &&
                event.pageY <= tileData[i].coords.bottom
            )  {
                // found a tile! trigger its click event handler
                $('#' + tileData[i].id).click();
            }
        }  

        return false;
    });
});

在此处试试：http://jsfiddle.net/neopreneur/vzq4z/1/

Answer 4

对于在这九年后绊脚石的人（像我一样），现在最好的方法是使用CSS指针事件属性...只需将其设置为元素“ none”，然后魔法。不需要JS。

https://caniuse.com/#search=pointer-events

如何将javascript事件从一个元素传递到另一个元素？

4 个答案: