如何將javascript事件從一個元素傳遞到另一個元素？

我有2個層疊在另一個之上。底層包含鏈接（簡單圖像），頂層包含高級工具提示，如底層的懸停。這些工具提示可能很大（它們可以輕鬆地重疊到其他鏈接上，並且幾乎總是與他們正在進行工具提示的鏈接重疊）。

我的問題：

我想發生在底層上我的鼠標懸停事件，然後鼠標懸停顯示在上層的提示。通過這種方式，當您離開底部鏈接時，上層中的工具提示消失，並且可以顯示新鏈接的工具提示。

如何從頂層獲取事件並將它們傳遞到下面的圖層？所以頂層是事件透明的。

示例HTML：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <style type="text/css" media="screen"><!-- 
     .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;} 
    --></style> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 

    <script> 
    $(document).ready(function(){ 
     $('div.tile').click(function(){ 
      $('#log').html(this.id + " clicked"); 
      return false; 
     })   
     $('div#top').click(function(){ 
      $('#log').html('Top clicked'); 
      return false; 
     }) 
    }); 
    </script> 
</head> 

<body> 
<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> 
</body> 
</html>

用JavaScript我驗證過的事件一樣工作正常，僅頂部被點擊的例子。但我基本上希望「超過」項目是事件透明。

來源

2010-12-03 silkcom

發表一些例子html – mpapis 2010-12-03 21:06:09

希望html幫助的例子。 – silkcom 2010-12-03 21:22:35

希望我理解的OP，但你可以複製已發生的原始事件之後的任何選擇的事件：http://jsfiddle.net/Cr9Kt/1/

在鏈接的樣本，我把該事件的頂層和在底層創建一個類似的事件。您可以通過單獨點擊每個元素（而不是整個頂部和底部）來進一步考慮這一點。

這是另外一個問題借來的想法：Triggering a JavaScript click() event at specific coordinates

來源

2010-12-03 22:02:37

我不太確定我明白你在問什麼。這聽起來有點像一個工具提示。這裏是一個如何使用jQuery，CSS和HTML做一個工具提示的例子。

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

希望得到您開始。如果你添加更多的細節，或者用更多的細節修改那個jsbin，我們可以迭代一下。

我更新了一些示例，包括使用jQuery將工具提示信息存儲到html元素本身。這是一個更清潔。

鮑勃

來源

2010-12-03 21:28:31 rcravens

我和一個正常的工具提示之間的主要區別是，我的原始鏈接也可以重疊（對不起，我忘了提及這部分）。 - 原始問題更新 – silkcom 2010-12-03 21:33:17

這似乎過於複雜和不雅......這假貨的功能..但它的工作原理;）

$(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/

來源

2010-12-03 22:26:10

如何將javascript事件從一個元素傳遞到另一個元素？

回答

相關問題