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

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.但我基本上希望"over"项目是事件透明的.

Answer 1

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

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

这是从另一个问题借来的想法：Triggering a JavaScript click() event at specific坐标

Answer 2

对于九年后（就像我一样）在这个问题上绊倒的人，现在最好的方法是使用 CSS 指针事件属性......只需将它的元素设置为“无”，看看魔法。不需要JS。

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