如何将javascript事件从一个元素传递到另一个元素？ [英] How do I pass javascript events from one element to another?
问题描述
设置舞台：
我有2层，一层在另一层之上。底层包含链接（简单图像），顶层包含高级工具提示，如底层的悬停。这些工具提示可能很大（它们可以轻松地重叠到其他链接上，并且几乎总是与它们作为工具提示的链接重叠）。
I have 2 layers one on top of the other. The bottom layer contains links (simple images), The top layer contains advanced tooltip like hovers for the bottom layer. These tooltips can be large (they can overlap onto other links easily, and almost always overlap the link they are tooltipping).
我的问题：
我希望我的鼠标悬停事件发生在底层，然后再开启mouseover在上层显示工具提示。这样，当您离开底部链接时，上层的工具提示就会消失，新链接的工具提示就会显示出来。
I'd like my mouseover events to occur on the bottom layer, and then on mouseover display the tooltip in the upper layer. This way as you move off of the bottom link the tooltip in the upper layer goes away, and the tooltip for the new link can show up.
我如何看待来自顶层的事件并将它们传递给下面的图层？因此顶层是事件透明的。
How do I take the events from the top layer and pass them to the layer below instead? So that the top layer is event transparent.
示例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项目是事件透明的。
With the example javascript I've verified that the events work like normal, and only top is clicked. But I basically want the "over" items to be event transparent.
推荐答案
希望我理解OP，但你可以复制原始事件发生后任何选择器上的事件： http://jsfiddle.net/Cr9Kt/1/
Hope I understand the OP, but you can replicate the event on any selector after the original event has occurred: http://jsfiddle.net/Cr9Kt/1/
在链接的示例中，我将事件放在顶层，并在底层创建一个类似的事件。你可以通过点击每个元素（而不是整个顶部和底部）来进一步采取这一点。
In the linked sample, I take the event on the top layer and create a similar event fired on the bottom layer. You can take this further with any individual clicking of each element(as opposed to top and bottom as a whole).
这是另一个问题的借来的想法：在特定坐标处触发JavaScript click（）事件
This is a borrowed idea from another question: Triggering a JavaScript click() event at specific coordinates
这篇关于如何将javascript事件从一个元素传递到另一个元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
