如何将 javascript 事件从一个元素传递到另一个元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4349819/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I pass javascript events from one element to another?
提问by silkcom
Setting up the stage:
舞台搭建：
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).
我有两层，一层在另一层之上。底层包含链接（简单图像），顶层包含高级工具提示，如底层的悬停。这些工具提示可以很大（它们可以很容易地重叠到其他链接上，并且几乎总是与它们正在使用工具提示的链接重叠）。
My question:
我的问题：
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.
如何从顶层获取事件并将它们传递到下面的层？这样顶层是事件透明的。
Example HTML:
示例 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>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.
通过示例 javascript，我验证了事件正常工作，并且只单击了顶部。但我基本上希望“结束”项目是事件透明的。
采纳答案by Alexis Abril
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/
希望我理解 OP，但您可以在原始事件发生后在任何选择器上复制事件：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).
在链接的示例中，我在顶层获取事件并在底层创建一个类似的事件。您可以通过单独单击每个元素（而不是整个顶部和底部）来进一步执行此操作。
This is a borrowed idea from another question: Triggering a JavaScript click() event at specific coordinates
这是从另一个问题借来的想法：在特定坐标处触发 JavaScript click() 事件
回答by charlie roberts
For people stumbling on this nine years later (like I did) the best way to do this now is with the CSS pointer-events property... simply set it to 'none' for your element(s) and behold the magic. No JS required.
对于九年后（就像我一样）在这个问题上绊倒的人来说，现在最好的方法是使用 CSS 指针事件属性......只需将它的元素设置为“无”，看看魔法。不需要JS。
回答by Nick G
This may seem overly complex and inelegant...it fakes your functionality.. but it works ;)
这可能看起来过于复杂和不雅......它伪造了你的功能......但它有效;）
$(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;
});
});
Try it here: http://jsfiddle.net/neopreneur/vzq4z/1/
回答by rcravens
I am not quite certain that I understand what you are asking for. It sound to me a bit like a tool tip. Here is an example of how to do a tooltip this using jQuery, CSS and HTML.
我不太确定我是否理解您的要求。这听起来有点像工具提示。下面是一个如何使用 jQuery、CSS 和 HTML 执行工具提示的示例。
http://jsbin.com/ilali3/13/edit
http://jsbin.com/ilali3/13/edit
Hope that gets you started. If you add some more details, or modify that jsbin with more details we can iterate a bit.
希望这能让你开始。如果您添加更多详细信息，或使用更多详细信息修改该 jsbin，我们可以进行一些迭代。
I updated the example a bit to include storing tool tip information into the html element itself using jQuery. This is a bit cleaner.
我对示例进行了一些更新，以使用 jQuery 将工具提示信息存储到 html 元素本身中。这样干净一些。
Bob
鲍勃
